javascript - Bootstrap4 .col 始终采用 100% 并垂直堆叠( Bootstrap 网格不工作)

Question

我正在尝试使用 Bootstrap 4 创建一个简单的页面。将有一个左侧边栏和一个内容区域，每个区域都是一列 w/in a row(每个 bootstrap 网格系统)。但是，即使将左列调整为较小的类(“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

令人尴尬，但我找到了答案...加载了第二个样式表来格式化另一个贡献者的内容。此样式表还包含一个行类，它取代了 Bootstrap 的行类并产生了不正确的结果。

感谢您的参与!