2

我有一排三列。

  • 第一个是大小 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 像素时，就会发生这种情况。我一直在尝试使用偏移量和列宽，但我没有正确对齐所有内容。任何帮助，将不胜感激。

4

2 回答 2

3

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 - 内联元素不应包含块元素，因此用 <a> 包装所有这些 div 违反规范。我认为任何浏览器都不会抱怨，这只是糟糕的形式。

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

于 2013-09-09T18:15:36.873 回答
0

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

于 2014-02-26T21:05:55.607 回答