Question

我有一个ul并且我将li项的宽度设置为等于.col-lg-4宽度，但似乎它们不相等。

我在这里创建了一个jsfiddle来说明我遇到的问题。关于如何将li项目设置为与col-lg-4上方宽度相同的任何建议？

你会注意到，第一个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。如果这是故意的，并且您只是希望图像与第一个选项卡“对齐”，那么您还可以从包含图像的列中删除填充。

bootstrap中等宽元素不相等

1 个答案: