如何使用引导程序创建网格

时间：2018-12-06 15:09:59

标签： bootstrap-4

使用引导程序4，“测试1”和“测试2”部分之间有什么区别？我正在尝试创建一种布局，在各列之间放置适当的装订线。一个在行内包含元素，另一个则没有

 <style type="text/css">
.section
{
    font-family:Arial;      
    border-color: #0080ff;
    border-width:1px;
    border-radius:10px; 
    background-color:#99ff99;   
}
</style>
</head>

<body>
 Box model:<br/>


<div class="container-fluid">
  <h2>test 1</h2>
  <div class="row">
    <div class="col-sm-4 section">left</div>
    <div class="col-sm-8 section">right</div>
  </div>
</div>

<div class="container-fluid">
  <h2>test 2</h2>
  <div class="row">
    <div class="col-sm-4"><div class="section">.col-sm-4</div></div>
    <div class="col-sm-8"><div class="section">.col-sm-8</div></div>
  </div>
</div>

输出
enter image description here



最终目标：
enter image description here

1 个答案:

答案 0 :(得分：0)

“装订线”（使用填充创建列之间的间距）。要更改它，请调整填充... 

  <div class="row">
    <div class="col-sm-4 px-2"><div class="section">.col-sm-4</div></div>
    <div class="col-sm-8 px-2"><div class="section">.col-sm-8</div></div>
  </div>

演示：https://www.codeply.com/go/FlMQ4xVRbs

相关问题
最新问题