如何使用bootstrap创建网格视图

Question

我是网络开发方面的新手，我正在尝试使用bootstrap提供的列和宽度来实现类似网格视图的布局，但我似乎无法确定如何在每个项目的开始之后完全设置项目在它上面。而且，我的项目还有一件事是动态的，所以我不知道它的高度是什么。

Answer 1

尝试类似：

<div class="container">
  <div class="col-md-4">First</div>
<div class="col-md-4">Second</div>
<div class="col-md-4">Third</div>
</div>

这将为您提供3列。另请查看here

上的bootstrap文档

Answer 2

对于动态网格视图，您可以通过名为Salvattore的库来完成。它的脚本可以帮助您根据指定的列数组织HTML元素。示例：

的 HTML

<div class="container">
    <div class="row">
        <div id="board" data-columns>
            <!-- Now here you can repeat these items with PHP -->
            <div class="items">
               <!-- your content -->
            </div>
        </div> 
    </div>
</div>

<强> CSS

.column{float:left;}

@media screen and (max-width:480px){
    .column{float:none;position:relative;clear:both;}
}

.size-1of4{width:25%;}
.size-1of3{width:33.333%;}
.size-1of2{width:50%;}
#board[data-columns]::before{content:'4 .column.size-1of4';}

/*--Configure salvattore with media queries--*/

@media screen and (max-width:450px){
    #board[data-columns]::before{content:'1 .column';}
}
@media screen and (min-width:451px) and (max-width:700px){
    #board[data-columns]::before{content:'2 .column.size-1of2';}
}
@media screen and (min-width:701px) and (max-width:850px){
    #board[data-columns]::before{content:'3 .column.size-1of3';}
}
@media screen and (min-width:851px){
    #board[data-columns]::before{content:'4 .column.size-1of4';}
}

上面的代码将产生4列，见下图。

也不要忘记使用salvattore缩小的js .. :)

Answer 3

使用CSS - 使用显示表和表格单元格。

＆＃13;

＆＃13;

body{
  background: #dedede;
}
.row{
  display:table;
  margin: 0 -10px 0;
  border-collapse:separate;
  border-spacing: 20px 10px; /*use border-spacing instead of margins*/
}
.col-sm-4{
  display: table-cell;
  padding: 10px 20px;
  background: #f1f1f1;
  box-shadow 0 0 5px 0 rgba(0,0,0,0.5);
  float:none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-4">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
  </div>
  <div class="col-sm-4">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
  <div class="col-sm-4">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

可替换地，

使用JS 您可以使用Match Height作为基于jquery的插件。

http://brm.io/jquery-match-height/