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

罗恩·老

嗨,大家好,我知道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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

拉伸图像以适合整个容器宽度的引导程序

如何设置列和容器的最大高度,以使图像适合Bootstrap 4中的整个页面?

如何在容器引导程序 4 中居中标签

如何拉伸 flexbox 以填充整个容器

引导模式拉伸到整个页面宽度?

如何在颤动中拉伸容器,使其占据剩余的屏幕?

如何在 div 容器中拉伸单个单词?

如何在整个应用程序中引用顶级容器而不使它单例?

如何制作可拉伸以适合包装物品的Flexbox容器?

如何在Firefox中打印整个页面?

如何放置适合整个页面的按钮?

如何在Selenium驱动程序中获取整个页面的innerHTML?

如何在不创建滑块并继续此页面的情况下将图像拉伸到整个页面高度?

如何在使用初始负载和抽动类时将引导程序组件(容器)扩展到整个窗口的宽度和高度?

引导程序如何使文本在div容器中垂直对齐

如何从引导程序中除去容器侧面的空白部分

如何在引导程序中创建列

如何让网格在 tkinter 中的容器内拉伸

如何使用引导程序 5 在导航栏中拉伸搜索框?

如何在引导容器中修复元素?

如何在容器(引导程序)中的另一个顶部显示一个 div?

如何在引导程序中以自定义宽度在页面上的1行中显示5个输入

如何在grails中找到授权给特定用户角色的整个应用程序中的所有gsp页面?

如何在整个显示中适合gridview中的所有元素?

如何在Visio 2013中旋转整个页面

如何在Liferay中重新加载整个页面

如何在Angular中更改整个页面的背景颜色

如何在Laravel中设置分页而不刷新整个页面

PHP 如何在整个页面中回显