我正在尝试在此页面上复制网格：
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)}}
<!--
<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>
答案 0 :(得分：3)
您正走在正确的轨道上，但我认为您尝试做的是将您的博客摘录放在8列（左侧）中，并将剩下的4列用于右侧的侧栏。
您可以在8列行（与现在相反）中嵌套12列 行，然后在嵌套完成后放置另一个4列侧栏。
这将使您的循环在更宽的屏幕上与右侧分开，这样它将继续列出帖子，同时保持侧边栏到位，直到视口缩小，然后侧边栏将在帖子列表下方折叠。
查看整页代码段内的2个示例，然后缩小浏览器。
.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>
答案 1 :(得分：1)
理解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博客中一样。不需要定制样式。