html - 将 col-md-2 用于侧边栏 Bootstrap 时 col-md-10 的全宽 4

标签 html css twitter-bootstrap bootstrap-4

我正在尝试为 nav-header 添加背景颜色,因为它在 col-md-10 内,所以当侧边栏 (col-md-2) 关闭时它不会占据全宽。 我试图将它包装在另一个 div 中,但它不起作用,我无法覆盖 col-md-10 规则。有什么办法吗?

<div class="container-fluid">
    <div class="row d-flex d-md-block flex-nowrap wrapper">
        <div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
            <div class="list-group border-0 card text-center text-md-left">

                <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a>
                <a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a><a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
                <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a>

            </div>
        </div>
        <main class="col-md-10 float-left">
            <div class="nav-header">
                <a href="#" data-target="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-2x py-2 p-1"></i></a>
                <a href="/" class="navbar-brand"><img src="img/logo.png" height="45" alt=""></a>
            </div>
            <div class="page-header">
                <h2>Bootstrap 4 Sidebar Menu</h2>
            </div>

            <hr>

        </main>
    </div>
</div>

最佳答案

也许是一个定位的伪元素来模仿背景。

.col-md-10 .nav-header{
  position: relative;

}

.col-md-10 .nav-header::after {
  content:"";
  position: absolute;
  top:0;
  left:0;
  height:100%;
  background: red;
  width:calc(100vw - 30px);
}

.col-md-10 .nav-header {
  position: relative;
}

.col-md-10 .nav-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: red;
  width: calc(100vw - 30px);
  z-index: -1
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row d-flex d-md-block flex-nowrap wrapper">
    <div class="col-md-2 float-left col-1 pl-0 pr-0 collapse width hidden" id="sidebar">
      <div class="list-group border-0 card text-center text-md-left">

        <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a>
        <a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a><a href="#" class="list-group-item d-inline-block collapsed"
          data-parent="#sidebar"><i class="fa fa-heart"></i> <span class="d-none d-md-inline">Item 4</span></a>
        <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar"><i class="fa fa-list"></i> <span class="d-none d-md-inline">Item 5</span></a>

      </div>
    </div>
    <main class="col-md-10 float-left">
      <div class="nav-header">
        Nav header content
        <a href="#" data-target="#sidebar" data-toggle="collapse"><i class="fa fa-navicon fa-2x py-2 p-1"></i></a>
        <a href="/" class="navbar-brand"><img src="img/logo.png" height="45" alt=""></a>
      </div>
      <div class="page-header">
        <h2>Bootstrap 4 Sidebar Menu</h2>
      </div>

      <hr>

    </main>
  </div>

关于html - 将 col-md-2 用于侧边栏 Bootstrap 时 col-md-10 的全宽 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47332199/

相关文章:

html - 如何导航到页面的某个部分

html - 特定尺寸的 CSS Hover

可以悬停并单击的 Javascript/CSS 工具提示

php - 水平显示超出页面宽度的父div

html - 我如何使用 Bootstrap 网格系统调整到带有表格的小屏幕

html - 如何处理 XSLT 中嵌入的 XML 标记?

javascript - textContent 并删除\r\n?

asp.net - 强制页面将自身加载到另一个页面的 iframe 中

twitter-bootstrap - Bootstrap + Responsive : Change multi column table to single column for mobile?(带图片)

css - Bootstrap - 正确对齐