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

时间:2017-12-16 22:26:12

标签: html css html5 twitter-bootstrap css3

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

enter image description here

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

我正在使用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;
}

再次感谢您的帮助

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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

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

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

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

答案 2 :(得分:0)

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