css - 等宽元素在 bootstrap 中不相等

Question

我有一个 ul 并且我已经将 li 元素的宽度设置为等于 .col-lg-4 宽度但是它似乎他们不平等。

我在这里创建了一个 jsfiddle准确说明我遇到的问题。关于如何使 li 项的宽度与上面的 col-lg-4 相同的宽度有什么建议吗？

在 fiddle 中，您会注意到第一个 li 的右边框与上图的边距不相等。

我使用的是 Bootstrap 3.1.1，我有这个标记:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 nopadding">
   <div class='tabs tabs_default'>

      <div id='tab-1'>
          <div class="row">
              <div class="col-lg-4">
          <div class="member-image">             
          <img src="http://placehold.it/550x350" alt="" class="img-responsive">
          </div>
          </div>

            <div class="col-lg-8">
            <div class="member-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, eius, nam, asperiores cupiditate adipisci totam illo dignissimos similique quas repellendus porro non dolorum explicabo beatae consectetur eos facere dolores dolore.
            </div>
         </div>
         </div>

      </div>



       <ul class='horizontal text-center'>
        <li class="item"><a href="#tab-1">Rembrandt</a></li>
        <li class="item"><a href="#tab-2">Picasso</a></li>
        <li class="item"><a href="#tab-3">Dali</a></li>
      </ul>

    </div>
  </div>

</div>

</div>

Answer 1

这与您的“无填充”类有关。 Bootstrap 网格通过向任何列左右添加 15px 的填充来工作。这就是提供一致的排水沟并将内容从容器边缘拉开的原因。

当您将一行嵌套在一列中时，-15px 左右的行边距会抵消填充并确保所有内容都很好地对齐。这就是网格的美妙之处。

所以，摆脱你的无填充，你会看到一切都很好地排列。

编辑:我刚刚注意到您也没有在选项卡上使用 cols。如果这是故意的，并且您只是希望图像与第一个选项卡“对齐”，那么您还必须从包含图像的列中删除填充。