導航欄和容器

-1

我有一個導航欄在一個容器類div，因爲我想在桌面視圖導航不觸摸監視器的邊緣，但在移動視圖它應該延伸到兩側。導航欄和容器

我嘗試了兩個容器，一個是容器，另一個是容器流體，並使它們與hidden-xx類一起消失，但這不起作用。

任何人的想法我該如何解決這個問題？

來源

2017-07-31 comidos

那你的代碼，所以我們可以得到什麼你已經這樣做的遠感的例子。 – Aer0

只需使用媒體查詢從特定容器中移除「padding-left」和「padding-right」即可。 –

您可以使用container，它的margin根據屏幕大小進行更改，因爲它設置爲auto。

.navbar-nav { 
 
    display:flex; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Page 1</a></li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<div class="container"> 
 
    <h3>Heading</h3> 
 
    <p>A navigation bar is a navigation header that is placed at the top of the page.</p> 
 
</div>

來源

2017-07-31 10:23:54

真的不明白。我有一個「容器」的導航欄，所以我的桌面寬度左右都有自由空間，但智能手機寬度也是如此。在智能手機視口中，我想要「容器流體」的包裝，從導航欄左側和右側沒有空餘空間。我怎樣才能認識到這種不同的風格？ – comidos

是的，我明白你的要求，你應該使用'容器'，更新我的答案，試試。 –

寫媒體查詢。

對於屏幕> 920px

.container{ 
    padding:0 10px 0 10px; 
}

對於屏幕< = 920px

@media screen and (max-width: 920px) { 
    .container { 
     padding:0; 
    } 
}

來源

2017-07-31 11:48:45

導航欄和容器

回答

相關問題