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

Question

I want to create admin panel with bootstrap. First I want to make navigation menu in the left side. I get the problem my navigation in the red background did not full width in the left columns like this code :

 <!-- 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

Are you trying to get red area cover the the pink area? For that you have to override the style of your css framework for `col-2'

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

Answer 2

If you don't need to change it for all class named col-2 , try this inline CSS

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

Else you can try this one

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

---

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

 <!-- 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> 

Answer 3

只是把引导程序p-0 类

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

Answer 4

Bootstrap 4.0.0-beta has some utility class for margin, padding, gutter, vertical align and more... please checkout this code snippet...

 <!-- 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>