Question

我想通过Bootstrap 4创建一个全宽度的网页。

我尝试移除容器液体的原始15px填充物，但它仍然无效。

有关jsfiddle的详细信息。我将整个背景标记为紫色，但你可以看到紫红色背景上没有完全覆盖jumbotron。

<style>
        .container-fluid {
            padding: 0 !important;
        }
    </style>

jsddle here

Answer 1

<div class="container-fluid px-0">
  <div class="row">
     <div class="col-12">
       your-content-goes-here
     </div>
   </div>
 </div>

https://getbootstrap.com/docs/4.1/utilities/spacing/#examples

Answer 2

只需使用 col 和 jumbotron 上的p-0和m-0实用程序类（无需额外的CSS）...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 p-0" style="background: purple;">
            <div class="jumbotron m-0">
                <h2>
                        Hello, world!
                    </h2>
                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                </p>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iAQiRARTFR

Answer 3

从字面上键入：全宽容器对我有用。

<div  class="container-full-width">
<div  class=" row ">
    <div class="col-12">

删除默认填充后，bootstrap 4 container-fluid不是全宽

3 个答案: