Question

我正在尝试使用Bootstrap 4创建一个简单的页面。将有一个左侧的边栏和一个内容区域，每个区域都是一行w /一行（每个引导网格系统）。但是，即使将左列调整为较小的类（“ 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％的容器宽度堆叠在下方。

在第二段代码中，我得到了两列垂直堆叠的列-每列的宽度为100％。

我很茫然，任何帮助都将不胜感激。

Answer 1

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

谢谢您的输入！

Bootstrap4 .col始终占用100％的空间并垂直堆叠（Bootstrap网格不起作用）

1 个答案: