Question

大家好，所以我知道boostrap容器有一个设置的宽度等等，我想尝试改变它，使它适合整个屏幕，所以我想在这里实现这个效果：

所以我希望有一半带有一张照片，另一半带有文字，但是时间我玩弄它的容器，当我试着看它是否有响应时，文字和图像重叠彼此，我想知道是否有办法解决这个问题

我正在使用bootstrap 3

到目前为止，我有：

HTML：

            <div class="clientsParrlex">
        <div class="container newconwidth">
    <div class="row">
        <div class="col-md-6 ">
        <img src="images/9.jpg">
        </div>
        <div class="col-md-6 ">
           <h1><span class="one">Våra</span> <span class="two">Klienter</span></h1>
        <p><strong>Quisque dolor lacus, commodo id hendrerit viverra, euismod in odio.</strong></p>
        <p>Aliquam fermentum massa ac est sollicitudin, at ultricies ligula tristique. Cras finibus, nulla ac convallis feugiat, nisl nisl lobortis est, eget auctor velit magna vel nunc. Donec nec eros rhoncus.</p>
        <p>Aenean nisi neque, aliquam ut nibh sit amet, finibus sagittis tortor aenean consectetur.</p>
        </div>
        </div>
        </div>
</div>

CSS：

.clientsParrlex {
    background-color: #0f0e0e;
        padding-top: 70px;
    padding-bottom: 70px;
    margin-bottom: 50px;
}

再次感谢您的帮助

Answer 1

这有帮助吗？我添加了一个名为“level”的类，用于在div列上应用填充，然后将图像的宽度更改为列的100％。

.clientsParrlex {
  background-color: #0f0e0e;
  padding-top: 70px;
  padding-bottom: 70px;
  margin-bottom: 50px;
}

.level > div{
padding:10px;
}

.level > div > img{
width:100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="clientsParrlex">
  <div class="container newconwidth">
    <div class="row level">
      <div class="col-md-6">
        <img src="http://via.placeholder.com/650x300">
      </div>
      <div class="col-md-6 ">
        <h1><span class="one">Våra</span> <span class="two">Klienter</span></h1>
        <p><strong>Quisque dolor lacus, commodo id hendrerit viverra, euismod in odio.</strong></p>
        <p>Aliquam fermentum massa ac est sollicitudin, at ultricies ligula tristique. Cras finibus, nulla ac convallis feugiat, nisl nisl lobortis est, eget auctor velit magna vel nunc. Donec nec eros rhoncus.</p>
        <p>Aenean nisi neque, aliquam ut nibh sit amet, finibus sagittis tortor aenean consectetur.</p>
      </div>
    </div>
  </div>
</div>

Answer 2

将“容器”改为“容器流体”

<div class="container newconwidth"> --->  <div class="container-fluid newconwidth">

类“容器”具有默认样式（我认为“max-width：980px; margin：0 auto;”）这是问题，因为使用属性“max-width”您的容器不占用100％窗口宽度。

在“container-fluid”类中没有属性“max-width”，因此容器占用窗口宽度的100％。

Answer 3

您可以将ID设置为要全屏显示的容器，并将其边距和填充设置为0

如何在引导程序中拉伸容器以适合整个页面

3 个答案: