Question

我在bootstrap 4中构建了我的网站的前端。我希望将我的一个页面分成四个背景图像，每个图像填充一列，以便列在移动设备上响应。截至目前，我有下面的设计，我使用background-image属性来填充每一列。但是图像并没有填满整个列。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="img img-profile-1">

            </div>
        </div>
        <div class="col-md-3">
            <div class="img img-profile-2" >

            </div>
        </div>
        <div class="col-md-3">
            <div class="img img-profile-3" >

            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="img img-profile-4">

            </div>
        </div>
    </div>
</div>

我将下面的css添加到每列中的div并获得了完整的图像，但是当我使视口变小时，会出现奇怪的滚动问题和空白区域。

.img-profile-1 {
        background-image: url('../img/image.jpg') !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100%;
        margin-left: -15px;
        margin-right: -15px;
    }

任何想法如何处理这种响应与背景图像的困境？谢谢！

Answer 1

您不必在<div>中添加其他.col-md-3以便为其提供背景信息，而是可以为<div>提供相同的.img-profile-1类.col等等。

Bootstrap 4还添加了一个很酷的类来删除每个.no-gutters之间的所有空格，它被称为.img-profile-1, .img-profile-3 { background-image: url('http://placehold.it/500/aaaaaa/000000'); background-repeat: no-repeat; background-position: center; background-size: cover; height: 300px; } .img-profile-2, .img-profile-4 { background-image: url('http://placehold.it/500/000000/ffffff'); background-repeat: no-repeat; background-position: center; background-size: cover; height: 300px; }。您可以在下面的剪辑中查看。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-3 img img-profile-1">
        </div>
        <div class="col-md-3 img img-profile-2">
        </div>
        <div class="col-md-3 img img-profile-3">
        </div>
        <div class="col-md-3 text-center img img-profile-4">
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>

for(int i=0; i<array.size;i++){//this loops through the first part of array
    for(int j=0;j<array[i].size;j++){//this loops through the now row
          //do something
     }
 }

Answer 2

不要在div的css中设置宽度和高度，而是尝试将类img-fluid添加到图像标记。

Answer 3

以下是修复 如果在bootstap中添加col-md-3或任何其他列，则需要右边填充和左边填充15px，以便内部内容不会覆盖整个宽度。要覆盖整个宽度，我们需要在列下方添加另一个带有类行的div，以便内部内容覆盖整个宽度

下面给出了固定代码

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
        <div class="row">
            <div class="img img-profile-1">

            </div>
            </div>
        </div>
        <div class="col-md-3">
        <div class="row">
            <div class="img img-profile-2" >
            </div>

            </div>
        </div>
        <div class="col-md-3">
        <div class="row">
            <div class="img img-profile-3" >
            </div>
            </div>
        </div>
        <div class="col-md-3 text-center">
        <div class="row">
            <div class="img img-profile-4">
            </div>

            </div>
        </div>
    </div>
</div>

Boostrap响应式设计网格问题

3 个答案: