第一种方法：ul和li实现分两列（多列）布局显示
<style type="text/css">
.my ul {
width: 210px;
}
.my li {
width: 100px;
float: left;
display: block;
}
</style>
<div class="my">
<ul>
<li>特别的爱给特别的你</li>
<li>特别的爱给特别的你</li>
<li>特别的爱给特别的你</li>
<li>特别的爱给特别的你</li>
<li>特别的爱给特别的你</li>
<li>特别的爱给特别的你</li>
</ul>
</div>
第二种方法：分成2列显示：
<div class="container-fluid px-0"> <div class="container px-0"> <div> <div class="col bg-light"> <button data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"> <i></i>What domain name should I choose for my site? </button> </div> <div class="col-12 col-lg-6 bg-light ml-lg-1"> <button data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"> <i></i>How do I give my computer a static local IP address? </button> </div> </div> </div> </div>
第三种方法：分成2列显示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="applicable-device" content="pc,mobile"> <meta name="renderer" content="webkit"> <meta name="theme-color" content="#28a745"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>电脑端测试</title> <link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css?ver=beta' type='text/css' media='all' /> </head> <body> <div class="container-fluid px-0 bg-dark"> <div class="container px-0"> <div> <div class="col bg-light">左边这里的宽度，用bootstrap内置的样式能不能有具体宽度值？</div> <div class="col-12 col-lg-4 bg-light ml-lg-1">请注意，右边这里有个左外边距的样式（ml-lg-1），用以区分左右之间有分隔</div> </div> <div>还有没有更好的写法？</div> </div> </div> <script type='text/javascript' src='https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js?ver=3.2.1'></script> <script type='text/javascript' src='https://cdn.bootcss.com/popper.js/1.11.1/umd/popper.min.js?ver=1.11.1'></script> <script type='text/javascript' src='https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js?ver=beta'></script> </body> </html>
第四种方法：分成2列显示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- IE将使用最新的引擎渲染网页 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 页面的宽度与设备屏幕的宽度一致 初始缩放比例 1:1 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <meta name="author" content="www.cnblogs.com/kemingli"> <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <!-- start : demo --> <div> <!-- 不常用，了解一下，见个效果就好 --> <form> <input type="text" /> <input type="text" /> </form> </div> <!-- end : demo --> <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 --> <script src="bootstrap/js/jquery.min.js"></script> <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 --> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>