Question

我希望以2种不同的格式显示这些Bootstrap元素，以提高响应速度：

格式-1：当屏幕足够大时，以内联方式显示它们（如下图所示）。
格式-2：当屏幕较小时，将它们显示为垂直（如下图所示）。

以下是给出的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">  
  <form class="form-inline" role="form">
     <div class="form-group">       
        <div class="row form-group ">   
            <label for="birthday" class="col-xs-2 control-label"></label>
            <div class="col-xs-3">
               <label for="form-input-col-xs-2" class="wb-inv">Administrative Job:</label>
               <input type="text" class="form-control" id="form-input-col-xs-2" placeholder="job" />
            </div>
            <div class="col-xs-3">
               <label for="form-input-col-xs-3" class="wb-inv"> Effective Date:</label>
               <input type="text" class="form-control" id="form-input-col-xs-3" placeholder="date" />
            </div>
           <div class="col-xs-3">
              <label for="form-input-col-xs-4" class="wb-inv">Payroll Amount:</label>
              <input type="text" class="form-control" id="form-input-col-xs-4" placeholder="amount" />
           </div>        
        </div>      
    </div>  
  </form>  
</div>
</body>
</html>

请建议我，需要做哪些修改？如有任何进一步的信息，请告诉我。谢谢

Answer 1

使用引导网格系统，您可以使用不同的类（如col-sm, col-lg等）在不同的屏幕上以不同的方式显示元素。

所以修改：

<div class="col-xs-3">

到

<div class="col-xs-12 col-lg-3">

这将在大屏幕上显示div到3列，并将其更改为12列，用于非常小的屏幕，因此可以将它们堆叠或垂直显示。

同样，您必须对标签进行一些更改，因为现在已经修改了类。

详细了解here

此解决方案适用于Large＆amp;小屏幕，空间大。然而，当屏幕尺寸变为中等时，当屏幕中等时，这些元素会变得杂乱而没有任何间隙空间（如下所示）可以做同样的垂直样式。

Answer 2

您正在混合不是（通常）您尝试构建的布局类型的类。您不需要（通常不应该）将form-group和row等类以及columns与inline-form混合在一起。

根据图像，您可以获得基本布局。请参阅示例代码段并参阅Docs。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <form>
      <div class="col-xs-12 col-sm-4">
        <div class="form-group">
          <label for="admin">Administrative Job:</label>
          <input id="admin" type="text" class="form-control" id="one" placeholder="Job" />
        </div>
      </div>
      <div class="col-xs-12 col-sm-4">
        <div class="form-group">
          <label for="date">Effective Date:</label>
          <input id="date" type="text" class="form-control" id="two" placeholder="Date" />
        </div>
      </div>
      <div class="col-xs-12 col-sm-4">
        <div class="form-group">
          <label for="payroll">Payroll Amount:</label>
          <input id="payroll" type="text" class="form-control" id="three" placeholder="Amount" />
        </div>
      </div>
    </form>
  </div>
</div>

Answer 3

Bootstrap的原理非常简单：你可以将12个相等的部分划分为.row及其.col-XX-N的中级子类，其中XX是设备大小选择器，N是总数为12的列数。如果子项总和超过12，则会开始新行。嗯，这不是那么简单，但那是起点和最重要的部分。

示例：

[class^="col-"] {padding: 10px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6">I'm a quarter (3/12) on screens larger than 1200px, a third (4/12)on screens between 992px and 1200px, half (6/12) on screens between 768px and 991px and full (because we didn't specify a col-xs) on screens up to 767px</div>
  <div class="col-lg-3 col-md-4 col-sm-6">I'm a quarter (3/12) on screens larger than 1200px, a third (4/12)on screens between 992px and 1200px, half (6/12) on screens between 768px and 991px and full (because we didn't specify a col-xs) on screens up to 767px</div>
  <div class="col-lg-3 col-md-4 col-sm-6">I'm a quarter (3/12) on screens larger than 1200px, a third (4/12)on screens between 992px and 1200px, half (6/12) on screens between 768px and 991px and full (because we didn't specify a col-xs) on screens up to 767px</div>
  <div class="col-lg-3 col-md-4 col-sm-6">I'm a quarter (3/12) on screens larger than 1200px, a third (4/12)on screens between 992px and 1200px, half (6/12) on screens between 768px and 991px and full (because we didn't specify a col-xs) on screens up to 767px</div>
</div>

为了测试它，请全屏显示并调整浏览器的大小。

如果col-...的直接父级是100％，则不必将它们包装在.row中，但建议使用它，因为Bootstrap有一些你不想要的智能边距规则无缘无故地打破。

在您的特定情况下，您首先要问自己：我想在哪里更改布局？在1200px（你使用col-lg-... s），992px（你使用col-md-... s）或768px（你已经猜到了：col-sm-... s！）？

假设您要将其更改为992px。您的表单将如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<form role="form">
  <div class="col-md-4">
    <div class="form-group">
      <label for="job-input" class="wb-inv">Administrative Job:</label>
      <input type="text" class="form-control" id="job-input" placeholder="job" />
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label for="date-input" class="wb-inv">Effective Date:</label>
      <input type="text" class="form-control" id="date-input" placeholder="date" />
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-group">
      <label for="payroll-input" class="wb-inv">Payroll Amount:</label>
      <input type="text" class="form-control" id="payroll-input" placeholder="amount" />
    </div>
  </div>
</form>

例如，如果您希望自己的群组在992和768px之间的屏幕宽度的一半，则需要添加col-md-4 col-sm-6：

<div class="col-md-4 col-sm-6">

但这意味着你的最后一组将独自一人，对吧？让我们集中精力吧。在持有cols的{{1}}的最后一个，添加类payroll-input，它告诉列在768px和992px之间的屏幕上偏移3列。但是您还想添加col-sm-offset-3，因此偏移量不会自动应用于.col-md-offset-0以上的所有类。试试吧：

sm

最后，但并非最不重要的是，对表单的一个非常好的补充是输入插件。您可以使用它们添加按钮，下拉列表甚至标签作为输入的前缀或后缀。让我们使用您的表单并将标签放在输入的开头：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<form role="form">
  <div class="col-md-4 col-sm-6">
    <div class="form-group">
      <label for="job-input" class="wb-inv">Administrative Job:</label>
      <input type="text" class="form-control" id="job-input" placeholder="job" />
    </div>
  </div>
  <div class="col-md-4 col-sm-6">
    <div class="form-group">
      <label for="date-input" class="wb-inv">Effective Date:</label>
      <input type="text" class="form-control" id="date-input" placeholder="date" />
    </div>
  </div>
  <div class="col-md-4 col-sm-6 col-sm-offset-3 col-md-offset-0">
    <div class="form-group">
      <label for="payroll-input" class="wb-inv">Payroll Amount:</label>
      <input type="text" class="form-control" id="payroll-input" placeholder="amount" />
    </div>
  </div>
</form>

form {
  padding-top: 15px;
}
.input-group-addon {
  min-width: 150px;
}

如何将这些Bootstrap元素从内联显示为垂直，反之亦然，适用于小屏幕和大屏幕

3 个答案: