Bootstrap生成固定宽度col，但仅适用于大型显示​​器，适用于较小的显示器

Question

我想为带有引导程序的大显示器生成一个固定宽度的col，但如果你在较小的显示器上使用它，它应该是reponsive。

<div class="container">
<div class="col-md-3"></div> <-- this should be fixed width 400px for big displays
<div class="col-md-9"></div> <-- content should be always responsive
</div>

这可能吗？感谢

Answer 1

您可以使用

添加响应能力

None

这将在大标签和移动屏幕中占据9列

Answer 2

在Bootstrap 3中获得固定流体布局的最佳方法是使用@media查询，该查询在与Bootstrap媒体查询相同的断点处工作。因此，在您的情况下使用992px（md）断点...

@media (min-width:992px) {
  #sidebar {
    min-width: 400px;
    max-width: 400px;
  }
  #main {
    width:calc(100% - 400px);
  }
}

Bootstrap Fixed-Fluid Layout

Answer 3

你可以这样做

<div class="container">
<div class="col-md-3 fixed-size-1"></div> <-- this should be fixed width 400px for big displays

    <div class="col-md-9 fixed-size-2"></div> <-- content should be always responsive
    </div>

CSS

.fixed-size-1{
//specify height and width
}
.fixed-size-2{
//specify height and width
}

Answer 4

使用CSS媒体查询为其添加固定宽度。

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp