覆盖 div 页面上的 bootstrap 个边距

Question

我正在使用 bootstrap 4.3.1，ASP.NET MVC (.NET 5)，所有页面的侧面都有空白，这很好，但我想要一个 div忽略它并成为宽度的 80% 并居中，而页面的其余部分保持不变。

无论如何 div 都不会改变，除非我输入“width: 1000px;”并且仍然有左边距，即使我指定“left: 50px !important”。

我试过将 div 设置为“容器流体”并将其添加到“行”中的组合。我也试过添加样式标签 "style="width:80% !important; left:50px !important;padding:0px;margin:0px;"

解决方案压缩文件：Google Drive

<div class="row" style="width:80% !important; left:50px !important;padding:0px;margin:0px;" >
    <ul class="nav nav-tabs">

        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
    </ul>
    <div>
        <div class="tab-content">     

            <div role="tabpanel" class="tab-pane fade active" id="rLocal">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                        Test 1
                    </div>
                    <div class="card-body">
                        <p>
                            TODO
                        </p>
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="rrEPRA">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                       Test 2
                    </div>
                    <div class="card-body">
                        <p>
                            TODO
                        </p>
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="rSWA">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                        Test 3
                    </div>
                    <div class="card-body">
                        <p>
                            None
                        </p>
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="rGI">
                <br />
                <div class="card" style="width: 100%;">
                    <div class="card-header alert-danger">
                        Test 4
                    </div>
                    <div class="card-body">
                        <p>
                            TODO
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
 <body>
   <div class="container">
     <main role="main" class="pb-3">

       <div class="container-fluid">
         <ul class="nav nav-tabs">

           <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
         </ul>
         <div>
           <div class="tab-content">

             <div role="tabpanel" class="tab-pane active" id="rLocal">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 1
                 </div>
                 <div class="card-body">
                   <p>
                     TODO
                   </p>
                 </div>
               </div>
             </div>

             <div role="tabpanel" class="tab-pane fade" id="rrEPRA">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 2
                 </div>
                 <div class="card-body">
                   <p>
                     TODO
                   </p>
                 </div>
               </div>
             </div>

             <div role="tabpanel" class="tab-pane fade" id="rSWA">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 3
                 </div>
                 <div class="card-body">
                   <p>
                     None
                   </p>
                 </div>
               </div>
             </div>

             <div role="tabpanel" class="tab-pane fade" id="rGI">
               <br />
               <div class="card" style="width: 100%;">
                 <div class="card-header alert-danger">
                   Test 4
                 </div>
                 <div class="card-body">
                   <p>
                     TODO
                   </p>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </main>
   </div>
   </body>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"  crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Answer 1

你有一个容器内的容器流体。您的父容器将在屏幕中央采用适当的宽度，然后您的容器流体将采用 100% 的宽度。所以最后你会得到一个与容器宽度相同的 div 。您需要做的就是删除包含 <main> 的 div，即 <div class="container">.

它应该看起来像：

<main>
    <div class="container-fluid">
    // Navbar Code
    </div>
</main>

这应该跨越整个导航栏。但是，你仍然会在两侧有一个 15px 的填充，你可以通过在 container-fluid div.

上添加一个 px-0 class 来删除它

此外，您还导入了 Jquery、Bootstrap-min 和 Bootstrap Bundle。如果您有捆绑包，则不需要 Bootstrap-min。您应该删除它以防止 Bootstrap.

的 JS 相关部分出现任何问题

覆盖 div 页面上的 bootstrap 个边距

Override bootstrap side gaps on page for div

css

asp.net-mvc

bootstrap-4

asp.net5