html - Bootstrap 网格两列一列多行

Question

我正在尝试复制此页面上的网格:

https://www.firebase.com/blog/

如您所见，有两个主要列(左列和右列)

左列包含多行，而右列只有一列并且与顶部垂直对齐。

如何使用 Bootstrap 实现这一目标？

我尝试了以下方法:

<div class="row">
            <div class="col-md-12">


                    <!-- LEFT -->
                    <div class="col-md-8 blog-post article"
                        ng-repeat="(key, blogpost) in blog.Posts">

                            <h1 class="text-left">{{blogpost.title}}</h1>
                            <p class="small text-left">{{blog.formatTimestamp(blogpost.date)}} 
                                <!--
                                &nbsp;&nbsp;
                                <span class="text-small">{{key}}</span>
                                -->
                            </p>

                            <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left"></div>

                    </div>



                    <!-- RIGHT -->
                    <div class="col-md-4" style="vertical-align: top !important">
                        Right text
                    </div>


            </div>
        </div>

Answer 1

您的方向是正确的，但我认为您想要做的是将您的博客摘录放在 8 列(左侧)内，并将其余 4 列用于右侧的边栏。

您可以在一个 8 列行的内部嵌套一个 12 列行(与您现在所拥有的相反)，然后在嵌套完成后放置其他 4 列侧边栏。

这将使您的循环在更宽的屏幕上与右侧分开，因此它将继续列出帖子，同时保持侧边栏就位，直到视口(viewport)缩小，然后侧边栏将折叠在帖子列表下方。

参见 Nesting Columns

在全页查看代码段中的 2 个示例，然后缩小您的浏览器。

1. 1) 模板的简单示例
2. 2) 它将呈现什么。 (CSS 仅用于示例。)

.article {
  text-align: left;
}
.sidebar-right {
  margin-top: 20px;
  padding: 0;
}
.markdown-custom p {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 200%;
  padding: 15px;
}
.sidebar-right p {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 200%;
}
.read {
  font-size: 16px;
}
.recent {
  margin-top: 20px;
}
.recent h4 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}
.recent a {
  font-size: 12px;
  color: #444;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<h2 class="alert alert-info">Template Loop</h2>

<div class="container">
  <div class="row">
    <div class="col-md-8 blog-post article">
      <div class="row">
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>{{blogpost.title}}</h1>

          <p class="small text-left">{{blog.formatTimestamp(blogpost.date)}}</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom"></div>
      </div>
    </div>
    <div class="col-md-3 col-md-offset-1">
      <div class="sidebar-right">{{sidecontent}}</div>
    </div>
  </div>
</div>
<hr>
<h2 class="alert alert-success">Rendered Example</h2>

<hr>
<div class="jumbotron">
  <div class="container">
    <h1>Some Blog</h1>

  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-8 blog-post article">
      <div class="row">
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 1</h1>

          <p class="small text-left">November 1st, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 2</h1>

          <p class="small text-left">September 25th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 3</h1>

          <p class="small text-left">August 5th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 4</h1>

          <p class="small text-left">July 5th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
        </div>
        <div class="col-md-12" ng-repeat="(key, blogpost) in blog.Posts">
          <h1>A Blog Title 5</h1>

          <p class="small text-left">June 5th, 1002</div>
        <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-md-offset-1">
      <div class="sidebar-right">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p><a class="read" href="#">Learn More</a>

        <div class="recent">
          <h4>Recent Articles</h4>

          <p><a href="#">Lorem Ipsum is simply</a> 
          </p>
          <p><a href="#">Lorem Ipsum is Lorem Ipsum is simply</a> 
          </p>
          <p><a href="#">Lorem Ipsum Lorem simply</a> 
          </p>
        </div>
      </div>
    </div>
  </div>
</div>