bootstrap 3，在小视口上将标签+输入对齐到左侧而不跳转到新行答案

【问题标题】：bootstrap 3, align label + input to left on small viewport without jumping to a new linebootstrap 3，在小视口上将标签+输入对齐到左侧而不跳转到新行
【发布时间】：2019-06-24 01:11:00
【问题描述】：

我正在使用 bootstrap 3.3.7，并且我有一个带有标签的简单组合，我希望将其左对齐并在同一行上。

但是当视口小于 768 时，它会转到下一行，即使它有很多空间，就像这样：

这是在 770 视口上（我想在较小的屏幕上保持这种方式）

在这里，在 764 视口上，选择输入会下降，即使它有很多空间

这是一个活生生的例子：https://www.codeply.com/go/npDT2mmYEP

我在bootstrap's documentation 看到以下内容：

将 .form-inline 添加到您的表单（不一定是 a ）左对齐和内联块控件。这仅适用于表格在至少 768 像素宽的视口中。

那么我该如何解决这个问题，我只想在 <select> 组合旁边保留带有“Ver”文本的 <p>，即使在较小的设备上也是如此......

【问题讨论】：

标签： twitter-bootstrap-3 alignment

【解决方案1】：

您可以使用 Bootstrap 3 网格 col-xs-** 并根据您的要求调整它们

    .fix-pagination .pagination {
      margin-top: -20px;
      margin-bottom: -20px;
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }

 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
  <div class="row fix-pagination">
    <div class="pull-left">
      <p class="col-xs-3 form-control-static red">Ver:</p>
      <p class="col-xs-9" style="padding-left:0px">
        <select class=" form-control repsal-rows-per-page-select">
          <option>20 registros</option>
          <option>50 registros</option>
          <option>100 registros</option>
          <option>500 registros</option>
        </select>
      </p>
    </div>
    <div class="pull-right green">
      <nav class="pull-right" aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li>
            <a href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

</div>
<!-- /container -->

【讨论】：

它工作正常，我认为 col-xx-xx 在行 div 内有效，并且他们必须对每个行 div 求和 12，在这种情况下，您在 pull-left 内使用它div

【解决方案2】：

到目前为止，我可以这样解决它：

.form-inline .form-control,
.form-inline .form-control-static {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

这是html

<div class="pull-left">
  <div class="form-inline pull-left">
      <p class="form-control-static">Ver:</p>
      <select class="form-control">
        <option>20 filas</option>
        <option>50 filas</option>
        <option>100 filas</option>
        <option>500 filas</option>
      </select>
    </div>
</div>

但我不确定这是否是最好的解决方案

【讨论】：