需要设计两排8个盒子

时间:2015-05-04 06:03:10

标签: css css3 twitter-bootstrap twitter-bootstrap-3

如何使用bootstrap设计8个框如下?

  • 忽略颜色每个框类似于访问卡
  • 它们应该只有两排8个盒子。
  • 在大屏幕中右侧和左侧的特定边距没有 小屏幕边距。所以在平板电脑应该是2和移动 版本每行只有1个。还需要确保盒子的大小 所有人都大小相同。

Demo enter image description here

var/run/mysqld

10 个答案:

答案 0 :(得分:9)

我知道这个问题是关于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 =&gt;移动布局| = |
  • 中的1项
  • 599px至1024px =&gt;平板电脑布局| = | = |
  • 中的2个项目
  • 1024px及更高版本=&gt;桌面布局| = | = | = | = |

    中的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;
      }
    }
    

有很多方法可以优化此示例或进行调整以达到目标。我希望这会有所帮助。

<强> [UPDATE] 我添加了display:flex;flex-wrap: wrap;的前缀,但如果可以的话,您应该在工作流程中添加AutoPrefixer

答案 1 :(得分:3)

我对您的问题的理解是,您希望在较小的屏幕上移除容器margin-leftright,以便卡片触及屏幕边缘。

下面的演示中有8行分为两行。我添加了一些paddingmargin来平衡卡片的间距,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 - 但您可以删除它只是为了帮助您在调整浏览器大小时看到断点和更改。

答案 2 :(得分:0)

你需要在你的Div中添加col-lg-3,如下面的代码。
 

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


或参见下面的链接
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/

答案 3 :(得分:0)

使用以下标记

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

答案 4 :(得分:0)

你可以使用一个简单的方法是使用clear:连续每4个元素之后的两个概念

waitOn:function(){
    Accounts.loginServicesConfigured();
}

答案 5 :(得分:0)

尝试使用以下代码:Demo

使用背景颜色类更新链接演示

<强> 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;
}

答案 6 :(得分:0)

假设您使用的是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>

答案 7 :(得分:0)

使用以下标记:

<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

答案 8 :(得分:0)

这个可能有帮助

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>

答案 9 :(得分:0)

这个可能有帮助

Bootstrap Grid System

<强> HTML

&#13;
&#13;
<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>
&#13;
&#13;
&#13;