如何在引导程序中设置网格以适用于所有屏幕尺寸？

Question

我的应用程序中有一个屏幕，我在其中使用了高音引导网格布局。虽然我在大型桌面显示器布局上开发它看起来不错。如果我转到移动设备，两个选择下拉输入字段将变得非常小，我看不到其中的任何文本。我最初在所有网格上使用col-xs，但后来我切换到col-md，这解决了问题。因此，如果我在移动设备上打开该页面，那么每一列都会被推送到下一行。但是，输入字段之间没有空格。似乎他们坐在彼此之上。我在引导程序中阅读了几篇关于网格布局的文章，他们建议为每个网格元素使用不同的列大小。我不确定它是如何工作的，我的解决方案是否正确？这是我到目前为止的示例：

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <form>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <select class="form-control" id="frmuser_status" name="frmuser_status" required>
            <option value="">Select</option>
            <option value="2">All</option>
            <option value="1">Active</option>
            <option value="0">InActive</option>
        </select>
      </div>
      <div class="col-xs-2">
        <select class="form-control" id="frmuser_filter" name="frmuser_filter" required>
            <option value="">Filter By</option>
            <option value="1">Name</option>
            <option value="2">Email</option>
            <option value="3">System ID</option>
        </select>
      </div>
      <div class="col-xs-4">
        <div class="input-group">
          <input type="Search" class="form-control" placeholder="Search User" />
          <div class="input-group-btn">
            <button class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<br><br>
<div class="container">
  <form>
    <div class="row">
      <div class="col-md-2 col-md-offset-2">
        <select class="form-control" id="frmuser_status" name="frmuser_status" required>
            <option value="">Select</option>
            <option value="2">All</option>
            <option value="1">Active</option>
            <option value="0">InActive</option>
        </select>
      </div>
      <div class="col-md-2">
        <select class="form-control" id="frmuser_filter" name="frmuser_filter" required>
            <option value="">Filter By</option>
            <option value="1">Name</option>
            <option value="2">Email</option>
            <option value="3">System ID</option>
        </select>
      </div>
      <div class="col-md-4">
        <div class="input-group">
          <input type="Search" class="form-control" placeholder="Search User" />
          <div class="input-group-btn">
            <button class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

在上面的示例中，我使用了不同列大小的相同代码来显示较小屏幕大小上的差异。确定列大小的最佳方法是什么？ xm,sm,md 或 lg 列需要多少列？如果有人可以提供帮助或提供任何示例，请告诉我。谢谢！

Answer 1

请为不同的尺寸使用不同的 css 和类，这是我推荐的。 我就是这样做的。使用visible-xs 或hidden-xs 类，如文档Here 中所述。

更新

首先：请将您的所有列更改为 col-lg-4 或除 lg 之外的任何内容，以作为大屏幕的默认值。 第二：在需要隐藏某些东西或显示一些小东西等的地方使用隐藏类和可见类。

示例

<div class="dropdown hidden-xs">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>


<div class="dropdown hidden-sm vissible-xs">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Small Screen
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

您必须根据需要添加自定义 css。