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>

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

Answer 1

cols - 包括offset cols - 需要加起来为12.你的lg col set最多加起来为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 - 内联元素不应包含块元素，因此使用＆lt; a＆gt;包装所有这些div。违反规范。我认为任何浏览器都不会抱怨，这只是一种糟糕的形式。

PPS - 我也没有费心去修理任何你的md，sm或者xs cols，所以一定要看看那些并确保你留下来= 12 cols。

Answer 2

你没有第二和第三个div中的偏移类。这些div之前的内容已经抵消了它。

Bootstrap 3.0列连续移动到新行

2 个答案: