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

【问题标题】：Reduce window width and keep current columns size减小窗口宽度并保持当前列大小
【发布时间】：2017-08-14 23:08:19
【问题描述】：

使用引导程序我希望能够在页面右侧留下一个额外的列：

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

问题是，即使我留下了 1 个可用列，它仍然会缩小中心的内容，因为我减小了窗口的大小。我希望能够保持内容集中并且在窗口宽度足够小时之前不会缩小。什么是最好的解决方案？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

谢谢，但问题是即使内容的左右有可用边距，中心的内容仍然会缩小。
你能告诉我内容或告诉我你正在使用什么元素吗？

【解决方案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

【讨论】：

【解决方案3】：

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

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

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

Bootstrap 行总是由 12 列组成，通过将 col-xs-offset-1 与 col-xs-10 结合使用，上述示例会自动在列的任一侧提供均匀的偏移量。

希望这会有所帮助！ :)

【讨论】：