Question

这Plunkr证明了我所看到的问题。我添加了背景颜色以突出显示问题

请注意，为了查看问题，您需要在其预览弹出窗口中查看plunkr - 或者预览面板的宽度至少为800px。如果您以前从未这样做过，请参见下图中的按钮。弹出后，将屏幕放大一点。

基本上，我发现的是，如果我有，比如4`col-sm-6'，它们通常并排坐在一起，给我2列2行。

在其中一个子元素中有一些长文本之前，这一切都可以。然后，这会推动以下细胞不对齐。

我确定这是一个简单的解决办法，但它让我不知所措......任何想法？

Plunkr中的代码是：

<div class="container">
  <div class="row">
    <div class="form-horizontal">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="col-lg-5 control-label">Company</label>
            <div class="col-lg-6">A really long company name fs df sd fsdfsdfsdf sdf s df sd f sdf sd f sdfsdfsdfsdf</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="col-lg-5 control-label">XYZ</label>
            <div class="col-lg-6">Something</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="col-lg-5 control-label">XYZ</label>
            <div class="col-lg-6">Something</div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="col-lg-5 control-label">XYZ</label>
            <div class="col-lg-6">Something</div>
        </div>
    </div>
    </div>
  </div>
</div>

Answer 1

尝试两行

<div class="container">
  <div class="form-horizontal">
   <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-lg-5 control-label">Company</label>
                <div class="col-lg-6">A really long company name fs df sd fsdfsdfsdf sdf s df sd f sdf sd f sdfsdfsdfsdf</div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-lg-5 control-label">XYZ</label>
                <div class="col-lg-6">Something</div>
            </div>
        </div>
    </div>
    <div class="row" >

        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-lg-5 control-label">XYZ</label>
                <div class="col-lg-6">Something</div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-lg-5 control-label">XYZ</label>
                <div class="col-lg-6">Something</div>
            </div>
        </div>
    </div>
  </div>
</div>

引导列中的长文本会影响以下列

1 个答案: