0

我的应用程序中有屏幕，我在其中使用高音扬声器引导网格布局。虽然我在大型桌面显示器布局上开发它看起来不错。如果我转到移动设备，两个选择下拉输入字段将变得非常小，我看不到其中的任何文本。我最初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列？如果有人可以提供帮助或提供任何示例，请告诉我。谢谢！

4

1 回答 1

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。

于 2018-04-04T17:56:09.320 回答