減少窗口寬度，並保持當前列大小

使用引導我希望能夠對網頁做的右側留下一個額外的列：減少窗口寬度，並保持當前列大小

<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

減少窗口寬度，並保持當前列大小

回答

相關問題