Css 屏幕尺寸小于等于350px的响应网格
对于小于350px的屏幕，我希望第二列出现在下一行。但目前它出现在超小屏幕768px上，我在代码中也这样做。对于350px或更小的屏幕尺寸，有什么办法吗。这就是我正在做的：Css 屏幕尺寸小于等于350px的响应网格,css,html,twitter-bootstrap,Css,Html,Twitter Bootstrap,对于小于350px的屏幕，我希望第二列出现在下一行。但目前它出现在超小屏幕768px上，我在代码中也这样做。对于350px或更小的屏幕尺寸，有什么办法吗。这就是我正在做的： <html> <head> <link type="text/css" rel="stylesheet" href="bootstrap.min.css"/> <style> @media (max-width:
<html>
<head>
<link type="text/css" rel="stylesheet" href="bootstrap.min.css"/>
<style>
@media (max-width: 768px) {
.Labels {
text-align: center;
float: none;
}
.InputFields {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="container-fluid" style="border:1px solid grey;">
<div class="row">
<div class="col-xs-12 col-sm-6 Labels" style="text-align: right;">FirstName</div>
<div class="col-xs-12 col-sm-6 InputFields" style="text-align: left;"><input type="text" size="20" maxlength="50"></div>
<div class="row">
<div class="col-xs-12 col-sm-6 Labels" style="text-align: right;">LastName</div>
<div class="col-xs-12 col-sm-6 InputFields" style="text-align: left;"><input type="password" size="20" maxlength="50"></div>
</div>
</div>
</body>
</html>
您没有关闭第一排结束div 为了达到您的要求，您需要进行一些小的修改 我的密码。试试这个
<html>
<head>
<!-- <link type="text/css" rel="stylesheet" href="bootstrap.min.css"/>-->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- loads the bootstrap css -->
<style>
.col-xs-6{
width: 35%;
}
</style>
</head>
<body>
<div class="container-fluid" style="border:1px solid grey;">
<div class="row"><!-- first row -->
<div class="col-xs-6 col-sm-6" style="text-align: right;">FirstName</div>
<div class="col-xs-6 col-sm-6" style="text-align: left;">
<input type="text" size="20" maxlength="50"></div>
</div><!-- end of first row -->
<div class="row"><!-- second row -->
<div class="col-xs-6 col-sm-6" style="text-align: right;">LastName</div>
<div class="col-xs-6 col-sm-6" style="text-align: left;">
<input type="password" size="20" maxlength="50"></div>
</div>
</div>
</body>
</html>