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

使用引导我希望能够对网页做的右侧留下一个额外的列：减少窗口宽度，并保持当前列大小

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

的问题是，即使我离开了1列无论如何，随着我缩小窗口的大小，它可以缩小中心的内容。我希望能够保持内容集中并且不缩小，直到窗口宽度足够小。什么是最好的解决方案？

来源

2017-08-14 user0187409

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

类hidden-*隐藏在一个特定的引导宽度

来源

2017-08-14 23:16:40 Will

谢谢，但问题是，即使内容的左侧和右侧有可用的边距，中间的内容仍然会缩小。 – user0187409

你能告诉我内容或告诉我你使用的是什么元素吗？ – Will

我建议媒体查询来更改行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>

什么会在这个例子中出现的情况是，当宽度为600像素或更低，包装DIV将规模作为页面大小的变化，但高于600px，div将保持固定的宽度。

https://www.bootply.com/SwAc2a0RgF

来源

2017-08-14 23:32:39 ddelam

处理这种情况最好办法是使用built-in functions在引导处理偏移，与语法.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>

一个引导行总是由12个柱子组成ns，并通过col-xs-offset-1与col-xs-10一起使用，上述示例自动在列的任一侧提供偶数偏移量。

希望这会有所帮助！ :)

来源

2017-08-14 23:58:19

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

回答

相关问题