2014-11-04 82 views
0

目前我試圖找到一種方法來縮小頂杆的範圍,像行默認做的那樣(保持寬度固定(ISH)即使當視口是寬屏桌面)如何防止基礎5.x頂杆走的寬度100%

我能夠得到這個工作W /一個簡單的div類的行+看來我應該/可以在不用這種方式包裝它的情況下實現這個工作。任何人都可以幫助減少我在下面的複雜性?

*注意-The類我,定製的東西是用來保持背景顏色在頂部相同的(本質上是相同的顏色頂級酒吧檯)

<div class="my-custom-thing"> 
    <div class="row"> 
    <div class="large-12 columns"> 
     <nav class="top-bar"></nav> 
    </div> 
    </div> 
</div> 

回答

1

如果你想排的屬性以及列你可以去與它..默認:max-width of row:62.5 empadding of columns

它看起來很好,我不認爲它看起來很複雜。

但是,如果你只是有這些類的寬度控制我建議下面的解決方案。

.my-custom-thing .top-bar { 
 
     width: 100%; 
 
     max-width: 62.5rem; 
 
     height:30px; 
 
     background-color:#555; 
 
     margin:0px auto; 
 
    }
<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/> 
 

 
<div class="my-custom-thing"> 
 
     <nav class="top-bar"></nav> 
 
</div>

+0

這根本是不工作 - 任何其他的建議? – 2014-11-05 17:20:55

+0

根本不工作?最大寬度沒有工作?這是對齊問題?因爲它必須已經左移,默認情況下將'margin:0px auto'設置爲居中對齊 – Sudheer 2014-11-06 06:27:51