Bootstrap4 .col 始终采用 100% 并垂直堆叠(引导网格不起作用)

Question

我正在尝试使用Bootstrap 4创建一个简单的页面。将有一个左侧边栏和一个内容区域，每个区域都是一行中的列(每个引导网格系统)。但是，即使将左列调整为较小的类("col-3"、"col-sm-4"等)，该列也会占用行宽的 100%。奇怪的是，第一列中的内容会根据较小的列类而减小大小，但无论选择哪个类，边距都会增加，直到第一列填满整行并将第二列推到新行。

<div class="container-fluid">
<div class="row no-gutters">
<div class="col-6">
<button type="button" class="btn btn-light" style="width: 100%;">Client 1</button><br>
<button type="button" class="btn btn-light" style="width: 100%;">Client 2</button><br>
<button type="button" class="btn btn-light" style="width: 100%;">Client 3</button><br>
<button type="button" class="btn btn-light" style="width: 100%;">Client 4</button><br>
</div>
<div class="col-6">
<p> Some test content</p>
</div>
</div>
</div>

<div class="container-fluid">
<div class="row no-gutters">
<div class="col">
<button type="button" class="btn btn-light" style="width: 100%;">Client 1</button><br>
<button type="button" class="btn btn-light" style="width: 100%;">Client 2</button><br>
<button type="button" class="btn btn-light" style="width: 100%;">Client 3</button><br>
<button type="button" class="btn btn-light" style="width: 100%;">Client 4</button><br>
</div>
<div class="col">
<p> Some test content</p>
</div>
</div>
</div>

第一个和第二个代码块应产生相同的结果。容器div 宽度的 1/2 的并排列。但是，我在这两种情况下都会得到堆叠列。不过有一个区别。

在第一个代码块中，我得到的第一列是容器宽度的 50%，按钮填充该宽度，另外 50% 的边距。第 2 列以 100% 的容器宽度堆叠在下方。

在第二个代码块中，我得到 2 列垂直堆叠 - 每列 100% 宽度。

我不知所措，任何帮助都非常感谢。

Answer 1

尴尬，但我想出了答案......加载了第二个样式表来格式化另一个贡献者的内容。此样式表还包含一个行类，该类取代了引导程序的行类并产生不正确的结果。

感谢您的投入！