Question

正如您在示例中所看到的，XS，SM，MD视图中的一切都很完美。然而，在LG视图中，无论我怎么努力，我都无法将所有内容都放在同一条线上。

我一直在研究这个问题太久了。有没有人有关于如何防止最后一列包装到新行的任何建议？或者，你有更好的策略吗？

这是具有多行的=CELL("address")=CELL("address",$C2)的一部分。我在输入上指定大小的原因是因为它表示可以从服务器返回的数据的总字符串长度。

标签应位于MD和LG视图的左侧

inline-form

Answer 1

Bootstrap的网格系统在12个计数列上运行，这意味着每行必须加起来不超过12个。现有代码的.col-lg计数为13.解决此问题应导致预期结果：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="form-inline">

    <div class="row">
      <div class="col-xs-12 col-md-15">
        <div class="form-group col-xs-6 col-lg-5">
          <label for="PositionDesp" class="control-label">Position:</label>
          <input id="PositionDesp" name="PositionDesp" class="form-control" type="text" size="50" value="" readonly>

        </div>
        <div class="form-group col-xs-3 col-sm-offset-1 col-sm-2 col-md-offset-0 col-lg-3">
          <label for="TotalFte" class="control-label">Total FTE:</label>
          <input id="TotalFte" name="TotalFte" class="form-control" type="text" size="6" value="" readonly>

        </div>
        <div class="form-group col-xs-3 col-sm-2 col-lg-4">
          <label for="BasePay" class="control-label">Base Pay:</label>
          <input id="BasePay" name="BasePay" class="form-control" type="text" size="25" value="" readonly>

        </div>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/g0338maf/1/

jjaiBx04mbD1ZvsLKuG6PyBFfJcYbl7iCnDCsi2l4tk=

如何阻止列包装或断开Bootstrap中的新行？

2 个答案: