Question

关于如何在Bootstrap 4上具有固定宽度的侧边栏，有很多示例，但是我还没有找到一个会导致主要内容在移动设备上消失的示例。

我尝试了以下操作：

<div class="row no-gutters flex-nowrap">
  <div class="col-md col-12 d-none d-xs-block d-sm-block ">
    Main area
  </div>
  <div class="col-md-4 col-12 sidebar">
    Sidebar
  </div>
</div>


.sidebar {
    max-width: 600px; min-width: 600px
}

大多数情况下，这是可行的，但是发生的是，在768至576像素之间，边栏完全消失了。

我要注意的是，边栏为固定宽度，主要区域缩小，最终消失。

Answer 1

使用几行CSS，您可以使用Flexbox实现此目的。请查看我添加了此答案的代码段。

要了解有关Flexbox的更多信息，可以检出这些链接。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://yoksel.github.io/flex-cheatsheet/

.wrapper {
  display: flex;
  height: 100vh;
}

.sidebar {
  min-width: 150px;
  max-width: 150px;
  height: 100%;
  background: grey;
  padding: 20px;
}

.content {
  padding: 20px;
  height: 100%;
  background: lightgrey;
}

<div class="wrapper">
  <div class="sidebar">
    sidebar
  </div>
  
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores, dolores eligendi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis modi adipisci autem illo labore ipsum numquam explicabo excepturi similique, perspiciatis doloremque, quo asperiores at veniam culpa aperiam maiores
  </div>
</div>

Answer 2

我相信您正在寻找：

@media (min-width:768px) {
  .sidebar {
    max-width: 600px; min-width: 600px;
  }  
}
.sidebar {
  background-color: #f5f5f5;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row no-gutters flex-nowrap">
  <div class="col d-none d-md-block">
    Main area
  </div>
  <div class="col sidebar">
    Sidebar
  </div>
</div>

我将固定大小的规则包装在@media查询条件中，仅适用于md及更高版本，并相应地修改了应用于列的类。

由于无论如何都设置了边栏的自定义宽度，因此在列上不需要col-*类。

引导程序4上的固定宽度边栏，其中主要区域在移动设备上消失了

2 个答案: