需要设计两排8个盒子

Question

如何使用bootstrap设计如下8个盒子？

请忽略颜色每个盒子类似于名片。
它们应该只有 8 个盒子，排成两行。
在大屏幕中左右有特定的边距并且没有小屏幕的边距。所以在平板电脑中应该是 2 而在手机中每行只有 1 个版本。还需要确保盒子的大小是都一样大小。

<div class="container-fluid">
                    <div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                    <div style="border-style: solid;padding:1%" class="col-md-2">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                    <div style="border-style: solid;padding:1%" class="col-md-2">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                    <div style="border-style: solid;padding:1%" class="col-md-2">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                </div>

Answer 1

您需要将 col-lg-3 添加到您的 Div 中，例如下面的代码。

    <div class="row">

        <div class="col-lg-12">
            <h1 class="page-header">Thumbnail Gallery</h1>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
    </div>




</div>

或参见下方Link
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/

Answer 2

使用以下标记

<div class="container">

    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>


    </div>
      <div class="row" >
        <div  class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%; ">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>


    </div>
</div>

Answer 3

您可以使用一种简单的方法，即在连续的每 4 个元素后使用 clear:both 概念

<style>
.clear{clear: both;}
</style>

            <div class="container-fluid">
                <div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
               <div class="clear"></div>
              <div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
               <div class="clear"></div>

Answer 4

尝试使用此代码：Demo

更新 Link 背景色演示 class

HTML:

<div class="container-fluid">
    <div class="row pb10">
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

CSS:

.card {
    border: 1px solid #333;
    padding:1%;
}
.mt20 {
    margin-top: 20px;
}
.pt5 {
    padding-top:8px;
}
.pb10 {
    padding-bottom:10px;
}
.desc {
    border-top: 1px solid #999;
    padding-top: 10px;
    margin-top: 10px;
}

Answer 5

假设您正在使用 bootstrap:-

<div class="row">
  <div class="col-md-12">
  <div class="col-md-3">
      hello
  </div>

  <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
  </div>
  </div>
 </div>



  <!--second row-->

 <div class="row">
    <div class="col-md-12">
  <div class="col-md-3">
      hello
  </div>

  <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
    </div>
   </div>
 </div>

Answer 6

根据您的问题，我的理解是您希望在较小的屏幕上移除容器 margin-left 和 right，以便卡片触及屏幕边缘。

下面的演示将 8 张卡片排成两行。我添加了一些 padding 和 margin 来平衡卡片的间距，nth-child 规则用于将其应用于正确的卡片。

如果你想保留左右边距，你可以排除我的媒体查询。

DEMO HERE

.card-row {
  background: lightsalmon;
}

.card .inner {
  height: 100px;
  padding: 10px;
  background: whitesmoke;
  color: grey;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
  margin: 15px 0;
}

@media screen and (max-width: 991px) {
  .container {
    width: 100%;
  }
  .card:nth-child(odd) {
    background: orange;
    padding-left: 0;
  }
  .card:nth-child(even) {
    background: darkorange;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .card:nth-child(odd), .card:nth-child(even) {
    background: coral;
    padding: 0;
  }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Heading</h3>
  <div class="row card-row">
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>Hello, I am beautiful content... please change me!</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
  </div>
  <div class="row card-row">
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>Hello, I am beautiful content... please change me!</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
  </div>
</div>

我还添加了一些 background-color - 但您可以删除它只是为了帮助您在调整浏览器大小时查看断点和更改。

Answer 7

我知道问题是关于 Bootstrap，但我认为仅用 html 和 css 就可以让人们看到它会有所帮助。我讨厌看到人们非常努力地使用 Bootstrap 来制作丑陋的解决方案，如果你不使用 Bootstrap。

CODEPEN

HTML:
只是一张名片列表

<ul>
    <li>
      <img src="http://lorempixel.com/50/50/sports/" alt="John Doe"/>
      <span class="content">
        <strong>Johnny Realestate</strong>
        <a href="mailto:johnny@realestate.io" title="Email Johnny">johnny@realestate.io</a> 
        <a href="tel:2223334444" title="Call Johnny">222.333.4444</a> 
        <address>
          1 Real Estate Court<br>
          suite 101<br>
          Real, AZ 10101
        </address>
      </span>
    </li>
    ... REPEAT
  </ul>

CSS:

移动优先
display:flex;
0 到 599px => 移动布局 |=|共 1 项
599px 到 1024px => 平板电脑布局 |=|=|共 2 项

1024 像素和更大 => 桌面布局 |=|=|=|=|共 4 项

ul {
  list-style:none;
  display:flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width:1024px; // should match the page width, this value is also reflected in the media queries
  width:100%;
  margin: 0 auto; // auto can be replaced with any value
  padding: 1em 0;
  background: orange;
}
ul li {
  width: 100%;
  margin: 0 0 1em 0;
  box-shadow:0px 0px 1px 1px black;
  background: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
ul li img {
  height:50px;
  width: 50px;
  margin: 0 5px 0 0;
}
ul li span {
  width: calc(100% - 55px);
}
@media (min-width:599px){
  ul li {
    width: 49%;
    margin: 0 2% 1em 0;
  }
}
@media (min-width:599px) and (max-width:1024px){
  ul li:nth-child(2n + 2){
    margin: 0 0 1em 0;
  }
}
@media (min-width:1024px){
  ul li {
    width: 24%;
    margin: 0 1.3333333333% 1em 0;
  }
  ul li:nth-child(4n + 4){
    margin: 0 0 1em 0;
  }
}

有很多方法可以优化此示例或调整它以实现您的目标。希望对您有所帮助。

[更新] 我为 display:flex; 和 flex-wrap: wrap; 添加了前缀，但如果可以的话，您应该将 AutoPrefixer 添加到您的工作流程中！

Answer 8

使用以下标记：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
    </div>
</div>

css:

.container-fluid{
    overflow: hidden;
}
.row{margin: 0 -30px;}

.card{
    border: 1px solid red;
    margin: 15px 0;
    padding: 15px;
    background: #f0f0f0;
}

JSFiddle Demo

Answer 9

这个可能有帮助

Bootstrap Grid System

Html:

<div class="container-fluid">
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
</div>

Answer 10

这个可能有帮助

Bootstrap Grid System

Html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
</div>

需要设计两排8个盒子

Need to design 8 boxes in two rows

css

twitter-bootstrap

twitter-bootstrap-3