html - 当div为0高度时如何在bootstrap中创建边框

Question

使用 Twitter-Bootstrap，我有一个包含侧边栏的页面部分(它不会占据整个页面，只是向下延伸到该部分的底部)。我在侧边栏右侧有几个部分，每个部分的一侧包含图像，另一侧包含一些文本，并且需要底部边框。

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

为澄清而编辑:我需要在本节中有两个不同的列 - 左边的一个(跨越 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

注意:在bootstrap中，你需要有.row正下方 .container或嵌套 col-* 之间

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

<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>