首页 >web前端 >css教程 >如何从 Bootstrap 3 列中删除填充?

如何从 Bootstrap 3 列中删除填充?

DDD
DDD原创
2024-12-09 15:50:18363浏览

How to Remove Padding from Bootstrap 3 Columns?

从 Bootstrap 3 中的列元素中删除填充

问题:

在 Bootstrap 3 中,您想要消除填充或 col-md-* 元素周围的边距,以确保它们无缝贴合,而不需要任何额外的空间

HTML 代码:

<div class="col-md-12">
    <h2>OntoExplorer.<span>

解决方案 1:使用行换行

通常,您应该使用 .row 包围多个列,而不是将它们嵌套在单个 .col-md-12 中。通过使用 .row,您可以避免嵌套列引入不必要的边距和填充。

<div class="container">
    <div class="row">
        <h2>OntoExplorer.<span>

解决方案 2:添加自定义样式

如果第一个解决方案确实如此还不够,您可以创建一个自定义类来删除填充和边距明确地。

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}
<div class="container">
    <div class="row">
        <div class="col-md-4 nopadding">
            ...
        </div>

        <div class="col-md-8 nopadding">
            ...
        </div>
    </div>
</div>

以上是如何从 Bootstrap 3 列中删除填充?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn