Question

我正在使用Bootstrap 3.3.7构建网格系统。容器的宽度为1200px。

当我将浏览器窗口的大小调整为< 768 px时，“ Grid 1 + 2 + 3”上的列对我设置的col-xs-xx没有反应。参见demo here。

当我将列的宽度设置为800 px而不是600 px时，在较小的屏幕上宽度是正确的，但是除非我设置了很高的高度，否则列在较大的屏幕上不适合在列上。

当屏幕低于768像素时，如何设置列以获得正确的宽度？

body {
        background-color: #f5f5f5;
    }
    div { 
        background-color: #fff;
    }
    .index-content a:hover {
      color: black;
      text-decoration: none;
    }

    .index-content {
      /*margin-bottom: 20px;*/
      /*padding: 50px 0px;*/
    }

    .index-content .row {
      margin-top: 20px;
    }

    .index-content a {
      color: black;
    }

    .index-content .card {
      background-color: #FFFFFF;
      padding: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }

    .index-content .card:hover {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
      color: black;
    }

    .index-content .card img {
      width: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      height: 350px;
    }

    .index-content .card h4 {
      margin: 20px;
    }

    .index-content .card p {
      margin: 20px;
      opacity: 0.65;
    }

    .index-content .blue-button {
      width: 100px;
      -webkit-transition: background-color 1s, color 1s;
      /* For Safari 3.1 to 6.0 */
      transition: background-color 0.5s, color 0.5s;
      min-height: 20px;
      background-color: #002E5B;
      color: #ffffff;
      border-radius: 4px;
      text-align: center;
      font-weight: lighter;
      margin: 0px 20px 15px 20px;
      padding: 5px 0px;
      display: inline-block;
    }

    .index-content .blue-button:hover {
      background-color: #dadada;
      color: #002E5B;
    }

    /* GRID ELEMENTS MEDIA QUERIES */

    
    @media (min-width: 768px) {
        .card {
            position: relative;
        }
        .card-content {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .card-content h4,
        .card-content p {
            color: white;
            width: 100%;
            float: left;
            margin: 0 0 5px;
        }
        .card-content a {
            float: right;
        }
        .index-content .card h4,
        .index-content .card p {
            padding: 15px 20px;
            margin: 0;
        }
        .index-content .card p {
            padding: 0 20px 15px;
            margin: 0;
        }
    }

    .margin_bottom{
        margin-bottom:10px;
    }
    .row [class*="col-"]{ 
        padding-right: 5px;
        padding-left: 5px; 
    }
    .row { 
        margin-left: -5px; 
        margin-right: -5px; 
    }
    
    .card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

<div class="container">
    <h3>Grid 1</h3>
    <div class="row">
      <div class="col-sm-12">
          <div class="row">
              <div class="col-sm-6 margin_bottom">
                  <img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-sm-6">
                  <div class="row">
                      <div class="col-sm-12 margin_bottom">
                          <img src="http://placehold.it/600x300" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
                  <div class="row">
                      <div class="col-xs-6 col-sm-6 margin_bottom">
                          <img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
                      </div>
                      <div class="col-xs-6 col-sm-6 margin_bottom">
                        <img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <h3>Grid 2</h3>
  <div class="row">
      <div class="col-xs-12 col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
      <div class="col-xs-12 col-sm-4">
          <div class="row">
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x245" alt="5" class="img-responsive"></img>
              </div>
              <div class="col-xs-6 col-sm-12 margin_bottom">
                  <img src="http://placehold.it/400x250" alt="5" class="img-responsive"></img>
              </div>
          </div>
      </div>
      <div class="col-xs-12 col-sm-4 margin_bottom">
          <img src="http://placehold.it/400x510" alt="5" class="img-responsive"></img>
      </div>
  </div>
  <h3>Grid 3</h3>
  <div class="row">
    <div class="col-xs-3 col-sm-3 margin_bottom">
      <!-- I can change the width to 800px to fit the xs viewport. But then the height on the column om sm viewport have to be 1020 px, which is way to high after my opnion -->
        <img src="http://placehold.it/300x610" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-xs-9 col-sm-6 margin_bottom">
        <img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-xs-12 col-sm-3 margin_bottom">
        <div class="row">
            <div class="col-xs-6 col-sm-12 margin_bottom">
                <img src="http://placehold.it/300x300" alt="5" class="img-responsive"></img>
            </div>
            <div class=" col-xs-6 col-sm-12">
                <img src="http://placehold.it/300x300" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
  </div>
</div>

Answer 1

网格正在做出应有的反应。嵌套col-xx-xx时，它们假定其父容器的宽度为100％。您将在引导文档页面See Two columns with two nested columns中找到更多信息。

您的html代码中有很多多余的html divs。对于前。您的网格1可以像这样

<h3>Grid 1</h3>
<div class="row">
    <div class="col-sm-6 margin_bottom">
        <img src="http://placehold.it/600x600" alt="5" class="img-responsive"></img>
    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-12 margin_bottom">
                <img src="http://placehold.it/600x300" alt="5" class="img-responsive"></img>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 margin_bottom">
                <img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
            </div>
            <div class="col-xs-6 col-sm-6 margin_bottom">
              <img src="http://placehold.it/300x290" alt="5" class="img-responsive"></img>
            </div>
        </div>
    </div>
</div>

您不需要两个col-xs-6 col-sm-6，只需col-xs-6即可完成工作。

小屏幕上，列的宽度不正确

1 个答案: