Boostrap集装箱净化和边界

Question

我正在学习Bootstrap。以下是要在不同容器中显示按钮的代码：

<div class="container" style="border:1px solid #cecece;">
<h1>Bootstrap 4 simple container (.container class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p> 
</div>

<div class="container-fluid" style="border:1px solid #cecece;">
<h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>

<div class="container-md" style="border:1px solid #cecece;">
<h1>Bootstrap 4 container-md (.container-md class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div> 

结果是：

问题：

1. 没有指定的对齐方式，但是3种类型的容器对齐（容器和容器 - MD与中心对齐，而容器 - 弗利德在左侧对齐）。是否有不同类型的容器的默认对齐？

2. 为什么容器 - 弗利德缺少底部边框？

Answer 1

您的第二个容器没有DIV关闭标签。下面的代码应修复它。

<div class="container" style="border:1px solid #cecece;">
<h1>Bootstrap 4 simple container (.container class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p> 
</div>

<div class="container-fluid" style="border:1px solid #cecece;">
<h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div>

<div class="container-md" style="border:1px solid #cecece;">
<h1>Bootstrap 4 container-md (.container-md class)</h1>
<p>
<button type="button" class="btn btn-info">example button 1</button>
<button type="button" class="btn btn-danger">example button 2</button>
</p>
</div> 

Answer 2

1. 您可以阅读有关对齐的更多信息在这里
   请参阅此片段，

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

2. 您尚未关闭container-fluid div

<div class="container-fluid" style="border:1px solid #cecece;">
  <h1>Bootstrap 4 fluid container (.container-fluid class)</h1>
  <p>
    <button type="button" class="btn btn-info">example button 1</button>
    <button type="button" class="btn btn-danger">example button 2</button>
  </p>
</div>