需要设计两排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

我知道这个问题是关于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:

• 首先是移动
• 显示:弯曲;
• 0到599px =>移动布局| = | 1个项目
• 599px到1024px =>平板电脑布局| = | = | 两件物品

• 1024px及更高=>桌面布局| = | = | = | = | 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添加到您的工作流程中!