css - 响应式 Bootstrap 4 布局
问题描述
我是引导程序的新手,并试图完成我的网站,其中包括类似这样的部分。请帮助我实现这一目标。
这是我的代码(如果有帮助的话)
<div class="row mfoo">
<div class="col-5 illus col-xs-12">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7 col-xs-12 text-right">
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
解决方案
您使用col-xs-*
但xs
尺寸不存在bootstrap-4
所以只用col-md-5/7
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row mfoo">
<div class="col-md-5 illus">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7">
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> dsf</p>
<p class="features_desc"> df</p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> df</p>
<p class="features_desc"> df</p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- python - TypeError('找不到合适的 SharedVariable 构造函数。') 使用千层面和 theano
- html - CSS背景颜色和颜色标签不起作用
- python - 从源代码构建张量流
- cython - 在 cython 中使用 MKL 失败,在来自 MKL 的共享对象中有未定义的符号,但直接执行没问题
- python - 使用 Python 从数据框中用逗号替换点
- python - 求解隐式解
- spring-boot - 引起:org.springframework.beans.factory.UnsatisfiedDependencyException:创建名为“thymeleafViewResolver”的bean时出错
- php - 在 WooCommerce 我的帐户中显示属于特定类别的产品
- wordpress - 更改了 Wordpress.com 网站中的 URL 并破坏了网站
- c - C:标准输入和文件输入,如何输入字符串并在文件中显示新行