时间戳

首页 > 解决方案 > Bootstrap4 .col 始终占用 100% 并垂直堆叠（引导网格不起作用）

javascript - Bootstrap4 .col 始终占用 100% 并垂直堆叠（引导网格不起作用）

问题描述

我正在尝试使用 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% 宽度。

我很茫然，非常感谢任何帮助。

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

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

谢谢您的意见！

推荐阅读