时间戳

首页 > 解决方案 > 正文 Bootstrap 中显示的未知空间

html - 正文 Bootstrap 中显示的未知空间

问题描述

我不知道究竟是什么问题，但我知道我可以使用overflow-x: hidden;，但我想要一个适当的解决方案来解决这个问题。

<style>
.sidebar{
    height: 500px;
    border: thin black solid;

}

.nav_menu{
    border: thin red solid;
}

.content{
    border: thin green solid;
    height: 430px;
}



</style>



<div class="row">
<div class="container">
<div class="col-md-3 sidebar">
    Your side bar content
</div>
<div class="col-md-9">
    <div class="row">
        <div class="col-md-12">
        <nav class="navbar navbar-default nav_menu">
          <div class="container-fluid">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Page 1</a></li>
              <li><a href="#">Page 2</a></li>
              <li><a href="#">Page 3</a></li>
            </ul>
          </div>
        </nav>
        </div>
    </div>

    <div class="row" style="margin:0;">
        <div class="col-md-12 content">
            Your Content
        </div>
    </div>
</div>
</div>

也许问题与使用.row类有关。

标签： htmlcssbootstrap-4

解决方案

您需要颠倒类的顺序 - 容器是父级 - 行类位于其中，而 col-X 位于行内。

在引导世界中 - 容器类具有将内容限制为最大 1200 像素并将其居中的样式（如果您想要一个全宽容器，请使用 .container-fluid）。

具有 .row 类的 div - 左右应用负 15px 边距 - 这是为了确保 div 的内容与左右齐平。列 div 的左右填充为 15 px，这种填充共同构成了列内容之间的“排水沟”（如果 .row 类没有 -15 边距 - 第一列左侧将有 15px acontent 和最后一列内容右侧的 15px。

<div class="container">
  <div class="row">
    <div class="col-md-3 sidebar">
     content
    </div>
    <div class="col-md-9 main-content">
     content
    </div>
   </div>
 </div>

推荐阅读