Question

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

但是，当视口小于768时，即使它有很大的空间，它也会转到下一行，例如：

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

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

这是一个实时示例：https://www.codeply.com/go/npDT2mmYEP

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

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

因此，我该如何解决这个问题，我只想在<p>组合键旁边保留<select>和“ Ver”文本，即使在较小的设备上……

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

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

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

引导程序3，在小视口上将标签+输入对齐到左侧，而无需跳到新行

2 个答案: