2014-09-23 107 views
1

具有紅色(左側)列和藍色(右側)列的響應式網站。紅色列有一個黑色的元素margin-top:30px縮小寬度和邊距頂部

當網站被調整大小,藍色列跳到紅色列下,紅色列「繼承」margin-top ..這怎麼能避免?

http://www.bluemachines.dk/_bootstrap/downsize/

+0

apply'display:inline-block;'to black element(.logo) – Anonymous 2014-09-23 16:47:36

+0

possible [duplicate](http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element ) – DavidT 2014-09-23 16:49:28

+0

@mary,創建答案 – clarkk 2014-09-23 16:52:10

回答

1

這是由於Bootstrap使用媒體查詢

你需要學習媒體查詢或者如果你不需要媒體查詢!不要在導航中使用Bootstrap類!

把這個放入@media(min-width:768px)和(max-width:979px),它可以很好地工作。

.nav-collapse, .nav-collapse.collapse { 
    overflow: visible; 
} 
.navbar .btn-navbar { 
    display: none; 
} 

您還可以通過改變 @網浮法斷點變量疊加停止導航欄爲1px

媒體查詢作品在移動設備的瀏覽器寬度u還可以指定您的風格在媒體查詢css

@media(max-width:767px){} 
@media(min-width:768px){} 
@media(min-width:992px){} 
@media(min-width:1200px){} 

這裏是鏈接disabling media queries

1

試試這個:

<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4"> 
       Your Content 
    </div> 
    <div class="col-md-8 col-lg-8 col-xs-8 col-sm-8"> 
       Your Content 
    </div> 

給所有的屏幕尺寸班,這個問題解決了!!!!