嗨,大家好,我知道boostrap容器有一个固定的宽度等,我想尝试对其进行更改,以使其适合整个屏幕,因此我在这里尝试实现这种效果:
所以我想让一半的行带有图片,另一半的行带有文本,但是每次我都在玩弄它拧紧的容器时,每次尝试查看它是否响应时,文本和图像都相互重叠,我想知道是否有办法解决这个问题
我正在使用引导程序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;
}
再次感谢您的帮助
这有帮助吗?我在行上添加了一个名为“ 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句