Question

我希望第二列出现在低于350px的屏幕的下一行。但是目前它出现在额外的小屏幕上（768px）（我的代码也是如此）。有没有办法做350px或更小的屏幕尺寸。这就是我在做的事情：

<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>

Answer 1

你没有关闭第一行结束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>

屏幕尺寸为350px或更小的响应式网格

1 个答案: