Question

使用Twitter-Bootstrap，我有一个页面的一部分，其中包含一个侧边栏（不占用整个页面，只是跨越到本节的底部）。我在侧边栏的右侧有几个部分，每个部分在一侧包含图像，在另一侧包含一些文本，并且需要底部边框。

我遇到了底线问题。由于每个部分都包含在div中，并且所有内容都使用Bootstrap列浮动，因此div的高度为0，边框全部浮动到顶部。

编辑以澄清：我需要在此部分中有两个不同的列 - 左侧一列（跨越3列），仅包含侧栏（并且一直占据底部的3列，留下空白区域）列表）和一个（跨越剩下的9列）包含故事部分但保留在页面的右侧。

已包含图片（包含灰线作为参考，不会显示在页面上，黑线是我尝试应用的边框）

尝试解决方案：

单个元素的底部边框：我需要在每个部分的底部有一条实线，因此我无法对图像和文本应用底部边框。
Clearfix：由于我有这个侧边栏，我不能使用clearfix，因为它会将所有内容推到侧边栏上。
溢出：使用溢出导致图像缩小（我不太明白，但它也没有帮助边框）。

如何为每个部分创建底部边框？

    <section class="stories">
      <div class="container">
        <h2>Section header</h2>
        <div class="col-sm-3 sidebar">
            <h6>list of stories</h6>
            <ul>
                <li>list-item</li>
                <li>list-item</li>
                <li>list-item</li>
                <li>list-item</li>
            </ul>
        </div>

        <section class="story-section">
            <div class="col-sm-3">
                <img src="http://placehold.it/330x220">
            </div>

            <div class="col-sm-6">
                <h6>keyword</h6>
                <h3>Header of section</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>

            </div>

        </section>

// (there are three more sections with the same class of "story-sections", plus other code on the page, but I've tried to simplify it as much as possible here.) 

      </div>
    </section>

css：

html, body {
        height: 100vh; 
      }

      .stories {

        .sidebar {
          height: 100vh; 
        }

        .story-section {
          border-bottom: 1px solid $grey; 
        }
      }

我对Bootstrap仍然相当新，所以可能有一个非常简单的解决方案，但我无法追踪它。非常欢迎任何帮助！

Answer 1

如果您想要一个包含3列的侧栏+左侧包含剩余9列的侧栏，则需要在col-*-9

中设置story-section 在引导程序中

注意：，您需要.row位于.container之下或嵌套col-*之间

＆＃13;

html,
body {
  height: 100vh;
}
.sidebar {
  height: 100vh;
  background: lightblue
}
.story-section {
  border-bottom: 1px solid grey;
}
img {
  margin-top: 10px
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="stories">
  <div class="container">
    <div class="row">
      <h2>Section header</h2>
      <div class="col-xs-3 col-sm-3 sidebar">
        <h6>list of stories</h6>
        <ul>
          <li>list-item</li>
          <li>list-item</li>
          <li>list-item</li>
          <li>list-item</li>
        </ul>
      </div>
      <section class="story-section col-xs-9 col-sm-9">
        <div class="row">
          <div class="col-xs-6 col-sm-6">
            <img class="img-responsive" src="http://placehold.it/330x220">
          </div>
          <div class="col-xs-6 col-sm-6">
            <h6>keyword</h6>
            <h3>Header of section</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
          </div>
        </div>
      </section>
      <section class="story-section col-xs-9 col-sm-9">
        <div class="row">
          <div class="col-xs-6 col-sm-6">
            <img class="img-responsive" src="http://placehold.it/330x220">
          </div>
          <div class="col-xs-6 col-sm-6">
            <h6>keyword</h6>
            <h3>Header of section</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eleifend dictum neque sed laoreet ...</p>
          </div>
        </div>
      </section>
    </div>
  </div>
</section>

＆＃13;

如果div为0高度

1 个答案: