如何使用bootstrap创建网格

问题描述 投票：0回答：1

使用bootstrap 4，“test 1”和“test 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

bootstrap-4
1个回答
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>

但是：ぁzxswい

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.