Question

我想用bootstrap创建管理面板。首先，我想在左侧制作导航菜单。我遇到问题，我在红色背景中的导航在左栏中没有全宽，如下代码：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-2" style="background-color:#f0f;">
      <div class="nav flex-column" style="background-color:#f00;">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-10">
      Content
    </div>
  </div>
</div>

Answer 1

您是否想让红色区域覆盖粉红色区域？为此，你必须覆盖`col-2＆＃39;

的css框架的样式

.override-class
{
padding-right: 0px!important;
padding-left: 0px!important;
}

Answer 2

如果您不需要为名为col-2的所有类更改它，请尝试使用此内联CSS

<div class="col-2" style="background-color:#f0f; padding-left:0px; padding-right:0px;">

否则你可以尝试这个

.col-2{
  padding-right: 0px !important;
  padding-left: 0px !important;
}

＆＃13;

.col-2{
  padding-right: 0px !important;
  padding-left: 0px !important;
}

＆＃13;

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-2" style="background-color:#f0f;">
      <div class="nav flex-column" style="background-color:#f00;">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </div>
    </div>

    <div class="col-10">
      Content
    </div>
  </div>
</div>

＆＃13;

Answer 3

只需放置引导程序p-0 class

<div class="col-2 p-0">

Answer 4

Bootstrap 4.0.0-beta 有一些实用程序类用于边距，填充，装订线，垂直对齐等等...请查看此代码段... < / p>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-2 p-0" style="background-color:#f0f;">
      <div class="nav flex-column" style="background-color:#f00;">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </div>
    </div>
    <div class="col-10">
      Content
    </div>
  </div>



</div>

如何使用网格引导使左侧的垂直导航全宽

4 个答案: