覆盖 div 页面上的引导程序侧间隙
Posted
技术标签:
【中文标题】覆盖 div 页面上的引导程序侧间隙【英文标题】：Override bootstrap side gaps on page for div 【发布时间】：2021-10-01 01:55:36 【问题描述】：我正在使用 bootstrap 4.3.1、ASP.NET MVC (.NET 5) 并且所有页面的侧面都有间隙，这很好，但我希望一个 div 忽略这一点，并保持 80% 的宽度并居中，而页面的其余部分保持不变。
除非我输入“width: 1000px;”，否则无论 div 是什么都不会改变并且仍然有左边距，即使我指定了“left: 50px !important”。
我尝试了将 div 设置为“container-fluid”并将其添加到“行”中的组合。我也尝试添加样式标签 "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>【问题讨论】：
left: 50px 无法按照您尝试的方式工作。它用于不相关的位置。试试这个：把整个东西放在一个带有container-fluid类的div中。这将跨越视口宽度的 100%。在里面使用你的导航而不使用row。 row 将在两侧添加默认填充。此外，row 在与 'col' 一起使用时很有用。如果只是 container-fluid 不起作用，请提出一个小提琴，以便我们在那里进行修改！
假设我正确地做了容器流体，它没有工作。我已经用 jsfiddle 更新了我的第一篇文章。谢谢。
我添加了更多细节，甚至上传了解决方案的 zip。
请在下面查看我的答案。
【参考方案1】：
你有一个容器内的容器流体。您的父容器将在屏幕中心采用适当的宽度，然后您的容器流体将采用 100% 的宽度。所以最后你会得到一个与容器宽度相同的 div。您需要做的就是删除包含<main> 的div，即<div class="container">。
它应该看起来像：
<main>
<div class="container-fluid">
// Navbar Code
</div>
</main>
这应该跨越导航栏。但是，你仍然会有一个 15px 的填充，你可以通过在 container-fluid div 上添加一个 px-0 类来删除它。
此外，您还导入了 Jquery、Bootstrap-min 和 Bootstrap Bundle。 如果您有捆绑包，则不需要 Bootstrap-min。您应该删除它以防止 Bootstrap 的 JS 相关部分出现任何问题。
【讨论】：
以上是关于覆盖 div 页面上的引导程序侧间隙的主要内容，如果未能解决你的问题，请参考以下文章