html - Bootstrap 3.0 列连续移动到新行

Question

我有一行三列。

• 第一个是尺寸 1 偏移量 0，
• 第二个是 6 号偏移量 1
• 最后一个是尺寸 1 偏移量 8

期望得到的是:

[Col1][Col2           ][Col3]

但我得到:

[Col1][Col2           ]
[Col3]

这是我的 html:

<div class="list-group">
            <a href="#" class="list-group-item itemlisting">
                <div class="row">
                    <div class="col-lg-1 col-md-1 col-sm-1">
                        <img src="http://blog.bleepie.com/images/2010/05/week-16-logo-post-to-facebook/logo.png" class="img-rounded imglogo hidden-xs">
                    </div>
                     <div class="col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-8 col-xs-offset-1 middleColumn">
                        <h4>Software Developer</h4>
                         <p>Shell Corporation</p>
                    </div>

                    <div class="col-lg-1 col-lg-offset-8 col-md-1 col-md-offset-8">
                        <p>Calgary</p>
                    </div>

                </div>
            </a>
        </div>

当我将屏幕调整为大于 991 像素的宽度时会发生这种情况。我一直在尝试调整偏移量和列宽，但在正确对齐所有内容方面运气不佳。任何帮助，将不胜感激。

Answer 1

cols - 包括偏移 cols - 需要加起来为 12。你的 lg col 集加起来为 19。将最后一个 col-lg-offset 从 8 切换到 1 解决了这个问题。参见 http://bootply.com/79908或下面的代码。

<div class="list-group">
  <a href="#" class="list-group-item itemlisting">
    <div class="row">
      <div class="col-lg-1 col-md-1 col-sm-1">
        <img src="http://blog.bleepie.com/images/2010/05/week-16-logo-post-to-facebook/logo.png" class="img-rounded imglogo hidden-xs">
      </div>
      <div class="col-lg-1 col-lg-offset-8 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-8 col-xs-offset-1">
        <h4>Software Developer</h4>
        <p>Shell Corporation</p>
      </div>
      <div class="col-lg-1 col-lg-offset-1 col-md-1 col-md-offset-8">
        <p>Calgary</p>
      </div>
    </div>
  </a>
</div>

PS - 内联元素不应包含 block 元素，因此用 包裹所有这些 div 违反规范。我不认为任何浏览器会提示，这只是糟糕的形式。

PPS - 我也懒得修复你的任何 md、sm 或 xs cols，所以一定要看看那些并确保你保持 =12 cols。