代码之家 › 专栏 › 技术社区 › bitshift

如何使用引导创建网格

bootstrap-4

bitshift · 技术社区 · 6 年前

使用bootstrap 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>

产量

最终目标:

1 回复 | 直到 6 年前

Carol Skelly 6 年前

“边沟”(列之间的间距是用填充创建的)。要更改它,请调整填充…

  <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

推荐文章

seriously · 按钮中元素的对齐

3 年前

USK · 引导模型在我的HTML文件中不起作用

3 年前

onit · 如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

user9644796 · 如何检查折叠的导航栏是否打开?

7 年前

JoeSlav · 使用引导上载损坏的文件

7 年前

John · 引导程序4,表单内联未在XS视图上对齐

7 年前

J. Sparks · 奇怪的图像定位(HTML、CSS、Bootstrap)

7 年前

user9719859 · 如何在bootstrap 4中更改选择选项programmaticaly?

7 年前

im5an · 如何使用angular在单行中显示徽标和导航栏?

7 年前