减小窗口宽度并保持当前列大小

Question

使用bootstrap我希望能够在页面右侧留下一个额外的列，以便：

<div class="row"><div class="col-md-push-1 col-md-10"> Content Goes Here </div></div>

问题在于，尽管我已经留下了1个col可用，但随着我缩小窗口的大小，它会缩小中心的内容。我希望能够保持内容集中，并且在窗口宽度足够小之前不收缩。对此最好的解决方案是什么？

Answer 1

<div class="row">
    <div class="col-1-md hidden-sm"></div>
    <div class="col-md-10"> Content Goes Here </div>
</div>

类hidden-*以特定的引导程序宽度隐藏内容

Answer 2

我建议使用媒体查询来更改行div的宽度。媒体查询可用于根据屏幕宽度指定CSS。

.container {
    width:600px;
  }

@media (max-width: 600px) {
  .container {
    width:100%;
  }

因此HTML标记可能看起来像

<div class="row container">
    <div class="col-md-push-1 col-md-10"> Content Goes Here </div>
</div>

在这个例子中会发生的是，当宽度为600px或更小时，包装div将随着页面大小的变化而缩放，但是在600px以上时，div将保持固定的宽度。

https://www.bootply.com/SwAc2a0RgF

Answer 3

处理此问题的最佳方法是使用built-in functions处理Bootstrap中的偏移，语法为.col-XX-offset-X：

＆＃13;

＆＃13;

.col-xs-10 {
  background: cyan;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-offset-1 col-xs-10">Content Goes Here</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Bootstrap行始终由12列组成，并且通过将col-xs-offset-1与col-xs-10结合使用，上面的示例会自动在列的任一侧提供偶数偏移

希望这有帮助！ ：）