引导网格两列一列多行

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 列侧边栏。

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

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

Answer 2

了解Bootstrap grid system 的工作原理是件好事。在您的示例中，不需要包装器.col-md-12。通常，您需要将列放在某种.container 元素中，然后将它们放在.row 中，就像这样。

<div class="container">
  <div class="row">
    <!-- 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)}}
      </p>
      <div btf-markdown="blogpost.markdown_text_summary" class="markdown-custom text-left"></div>
    </div>

    <!-- RIGHT -->
    <div class="col-md-4">
      Right text
    </div>
  </div>
</div>

http://codepen.io/anon/pen/bVmPPV

您放置在这些列中的内容将从顶部开始向下移动，就像在 Firebase 博客中一样。无需自定义样式。