【发布时间】：2021-06-12 16:51:16
【问题描述】：
我有一个非常简单的 bs4 布局。我的左侧菜单是<div class="col-md-2">，我的中心主内容是<div class="col-md-6">，我的右侧菜单是<div class="col-md-4">。这是通过 Chrome 开发工具查看的布局视图。绿色是填充，蓝色是内容。您可以看到左侧菜单和 center-main-content 之间有一个很好的空间，但是 center-main-content 和 right-menu 之间没有空间。
经过进一步审查，我发现实际上文本正在侵占填充。请参阅下面的填充（绿色）的文本；
...我看的更远了，甚至发现这个文本侵占了填充；
我该如何阻止这种情况？我想在列之间有填充或边距。这是我的标记的快速快照
这是最少的代码；
<html lang="en">
<head>
<title>New Post!Admin Area</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<main role="main">
<div class="container-fluid">
<div class="row">
<!-- left menu -->
<div class="col-md-2">
<div id="accordion" class="accordion">
<!-- content // collapseOne-->
<div class="card cardmargin">
<div class="card-header">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="fas fa-cloud"></span>Content</a>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="fas fa-pencil-alt"></span><a href="http://www.jquery2dotnet.com">Articles</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-newspaper"></span><a href="http://www.jquery2dotnet.com">News</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-paper-plane"></span><a href="http://www.jquery2dotnet.com">Newsletters</a>
</td>
</tr>
<tr>
<td>
<span class="fas fa-comments"></span><a href="http://www.jquery2dotnet.com">Comments</a>
<span class="badge badge-dark">42</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- center-main-content -->
<div class="col-md-6">
<div class="row">
<h2>Some Title</h2>
</div>
<div class="row">
Some Category
</div>
<div class="row">
<p>It is a long established fact that a reader will be
distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as
opposed to using 'Content here, content here',
making it look like readable English. Many desktop
publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for '
lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected
humour and the like).</p>
<p>It is a long established fact that a reader will be
distracted by the readable content of a page when looking
at its layout. The point of using Lorem Ipsum is that it
has a more-or-less normal distribution of letters, as
opposed to using 'Content here, content here',
making it look like readable English. Many desktop
publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for '
lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected
humour and the like).</p>
</div>
</div>
<!-- right-menu -->
<div class="col-md-4">
</br>
<!-- created -->
<div class="row">
<h5>Created:</h5>
</div>
<div class="row">
2021-06-12 06:26:23
</div>
</br>
<!-- updated -->
<div class="row">
<h5>Updated:</h5>
</div>
<div class="row">
2021-06-12 06:26:23
</div>
</br>
<!-- Author -->
<div class="row">
<h5>Author:</h5>
</div>
<div class="row">
mainuser
</div>
</br>
<!-- publised -->
<div class="row">
<h5>Published?</h5>
</div>
<div class="row">
No
</div>
</br>
<!-- featured image -->
<div class="row">
<h5>Featured Image</h5>
</div>
<div class="row">
<img src="https://development.example.com/filemanager_files/thumbs/no-image.jpg" >
</div>
</div>
</div>
</div> <!-- /container -->
<hr>
</main>
<footer class="container">
<p>© example.com 1999-2021 || Phone: +81-555-5555-5555 || Fax: +81-555-5555-5555|| Email: info@example.com </p>
</footer>
【问题讨论】：
-
请在您的问题中添加minimal reproducible example。外部链接可能会消失，从而使问题不完整且无法回答。仅添加代码图像没有帮助Read Why
-
您应该添加最少的可重现代码，以便每个人都能正确理解它。 see why you shouldn't post image as a code or an error
-
您应该将代码以文本形式放在问题框上。我建议您查看How to Ask
-
我包含了一个指向实际最小代码的外部链接。该图像是代码的进一步极简视图（以 html 块分组以帮助理解视图）。我已经删除了 html 的图像和 html 的链接。我已将 html 添加到问题中。我理解修改问题的请求，但您为什么要投票结束该问题？为什么投票关闭？为什么不尝试帮助这块板的精神呢？ @Jean Gotop 我已经审查了您关于如何读取 json 文件的问题 - 相同的问题 - 问题中的图像，您甚至没有提及您尝试过的内容。
标签： css twitter-bootstrap bootstrap-4