Html 如何在不使用填充时删除水平滚动条

我有一个问题： 我想创建一个布局，但是当我删除下面代码行（p-0）的填充时，一个水平滚动条就会出现。有没有可能我可以删除填充而不显示滚动条？我不知道该怎么办，也许你们能帮我。问题是我想让col保持完整长度而不加填充，但是当我删除填充时，水平滚动条就会出现

...

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">    
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
...

。。。
...

引导示例








带有内联元素的导航栏文本
聊天
苏晨
正文
图标
德国天文学会
艾因加贝
形式

可能您的网格实现不正确避免向引导类添加其他样式并在需要时使用.row。当您需要自定义样式时，请在

.container

、

.row

和

.col

中使用包装器，这样您就可以在不改变引导行为的情况下管理它们

在您的情况下，我将从

p-0

的父

div

中删除类

行

，然后从

p-0

中删除类

col-md-12

，将

p-0

宽度设置为

100%

，并删除属性

padding:0px

。不管怎样，我认为嵌套元素中还有其他问题，所以适合您的课程有：

---

在带有col-md-8的div class=行中，删除带有-15px的左右边距

与您的类似（使用

m-auto

的答案是不明智的），实际问题是网格结构不正确

网格必须是

container

row

col-*

s>

row

col-*

s等等

---

简单回答：

“如何在不使用填充时删除水平滚动条”

遵循正确的网格结构

<div class="container-fluid">
    <div class="row">
        <div class="col-12 bg-info p-0">
            no padding
        </div>
    </div>
</div>

您有一个

col-12

立即嵌套在另一个

col-12

中，这将不起作用。正确的结构是

<div class="col-md-8">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
                    content here
                </div>
            </div>
        </div>
    </div>
</div>

满足于此

其次，列和行被过度使用。没有理由将12个单位列放在多行中，多行中有12个单位列。也没有理由在每个断点使用相同的大小

col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12

同：

col-12

最后应该只有一个外部容器流体，而不是嵌套在容器内的容器。如果要删除列周围或列之间的间距，则存在一个错误，这是删除整行檐槽（填充）的正确方法

只需遵循以下步骤，即可大大简化整个标记。您只需了解网格是如何工作的，就可以节省大量时间

---

容器

行

>（包含内容的列）>

行

>（包含内容的列）等。

在CSS中，您需要添加

。行{margin:0；}

<div class="col-md-8 ">
    <div>
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
                    <div class="row">
                        <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
                    content here
                </div>
            </div>
        </div>
    </div>
</div>