自举网格：位置不对称

时间：2015-10-12 09:27:05

标签： html css twitter-bootstrap

所以我正在建立这个投资组合类型的网站，我只是无法使引导网格正常工作。正如您在图像中看到的那样，以大图像开头的第二个大行与第一行不对称。我真的不明白问题出在哪里。我已经设法在没有使用固定宽度和高度的引导程序的情况下做到这一点，但这实际上不是一个选项，因为我会失去所有的响应能力。我在这做错了什么？

<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
    <div class="row">
        <div class="col-md-7" style="padding-right: 0">
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
        </div>
        <div class="col-md-5" style="padding-left: 0">
            <div class="col-md-12" style="padding: 5px;">
                <img src="http://placehold.it/780x415" class="img-responsive">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-5" style="padding-right: 0">
            <div class="col-md-12" style="padding: 5px;">
                <img src="http://placehold.it/780x415" class="img-responsive">
            </div>
        </div>
        <div class="col-md-7" style="padding-left: 0">
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
            <div class="col-md-4" style="padding: 5px;">
                <img src="http://placehold.it/350x200" class="img-responsive">
            </div>
        </div>
    </div>
</section>

bootstrap grid

更新

所以我实际上设法通过创建两个新的列类来解决我的问题 - col- -small-blocks和col - -large-blocks 

.col-xs-small-blocks,
.col-sm-small-blocks,
.col-md-small-blocks,
.col-lg-small-blocks {
  position: relative;
  min-height: 1px;
  padding: 0;
}

.col-xs-small-blocks {
  width: 60%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-small-blocks {
    width: 60%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-small-blocks {
    width: 60%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-small-blocks {
    width: 60%;
    float: left;
  }
}

.col-xs-large-blocks,
.col-sm-large-blocks,
.col-md-large-blocks,
.col-lg-large-blocks {
  position: relative;
  min-height: 1px;
  padding: 0;
}

.col-xs-large-blocks {
  width: 40%;
  float: left;
}

@media (min-width: 768px) {
  .col-sm-large-blocks {
    width: 40%;
    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-large-blocks {
    width: 40%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-large-blocks {
    width: 40%;
    float: left;
  }
}

这解决了这个问题，bootstrap最初没有5列网格的类，所以你可以看到我为我的小图像创建了一个占用60％空间的列和一个用于我的大块的列占空间的40％。之后我只使用col-md-4为大块创建小块和col-md-12 

<section class="container-fluid" style="max-width: 1980px; min-width:1280px;">
    <div class="row">
        <div class="col-md-small-blocks">
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
        </div>
        <div class="col-md-large-blocks">
            <div class="col-md-12 block-padding">
                <img src="http://placehold.it/750x405" class="img-responsive">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-large-blocks">
            <div class="col-md-12 block-padding">
                <img src="http://placehold.it/750x405" class="img-responsive">
            </div>
        </div>
        <div class="col-md-small-blocks">
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
            <div class="col-md-4 block-padding">
                <img src="http://placehold.it/375x200" class="img-responsive">
            </div>
        </div>
    </div>
</section>

现在你可以看到，一切都是对称的和敏感的:)

solved

0 个答案:

没有答案
相关问题
最新问题