一旦媒體查詢發生變化，減少空白空間

我想有一個標題，我有一個標誌，留下一些鏈接在右邊。在這個標題下面，我想要一個與上面的內容相同的菜單。

我在這個例子中有這個：https://jsfiddle.net/v529b4mz/1/，它工作。但也有2個問題：

例如，如果屏幕的大小爲1920px我有一些白色邊緣周圍的內容，如果屏幕大小周圍的空間減小，有一些點，媒體querie變化和當媒體雀躍變化時，周圍還有更多的空白空間，但我想沒有太多的空間。因此，當媒體查詢發生變化時，我希望減少空間，以便內容佔用更多空間。

你知道該怎麼做？

例如，如果我想在此示例中使用背景顏色綠色的此菜單：https://jsfiddle.net/v529b4mz/1/在所有媒體查詢中除了額外的小媒體查詢，我想要隱藏此菜單並顯示移動菜單。如何做到這一點，沒有必要減少太多的字體大小或列表項的填充，或兩者，而是利用周圍的空白，所以清單項目看起來清晰直到小媒體查詢？

而且，列表元素之間有一些邊距，你知道爲什麼嗎？

注意：header和section元素只是爲bootstrap容器提供全寬的背景色。

HTML：

<header style=background:yellow;> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-2" style="background-color: orange"> 
     Logo 
     </div> 
     <div class="col-10 d-flex justify-content-end" style="background-color: pink; "> 
     Links 
     </div> 
    </div> 
    </div> 
</header> 

<section style="background:pink;"> 
    <div class="container"> 
    <div class="row" style="background-color: green"> 
     <div class="col-12"> 
     <ul> 
      <li><a href="">Item1</a></li> 
      <li><a href="">Item2</a></li> 
      <li><a href="">Item3</a></li> 
      <li><a href="">Item4</a></li> 
      <li><a href="">Item5</a></li> 
      <li><a href="">Item6</a></li> 
      <li><a href="">Item7</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</section>

CSS：

*{ 
    box-sizing:border-box; 
} 
ul{ 
    display: flex; 
    align-items: center; 
    list-style:none; 
    justify-content:space-between; 
} 
ul li{ 
    padding:20px; 
    border:1px solid gray; 

}

來源

2017-08-25 JonD

您使用.container它創建2箇中斷點之間的固定寬電網。
您可以通過.container-fluid是取代它......嗯流體 :)
請注意，您必須手動設置在section父一些填充：可以在REM固定填充，EM或PX或比例到視口的寬度爲vw單位（100vw =視口的寬度）或它們的組合，具體取決於分辨率。

Relevant documentation（引導4.0如發現自己的提琴）

容器提供給您的中心站點的內容的方式。使用.container固定寬度或.container-fluid全寬度。

Updated Fiddle

<section style="background:pink;"> 
    <div class="container-fuild"> 
    <div class="row" style="background-color: green"> 
     <div class="col-12"> 
     <ul> 
      <li><a href="">Item1</a></li> 
      <li><a href="">Item2</a></li> 
      <li><a href="">Item3</a></li> 
      <li><a href="">Item4</a></li> 
      <li><a href="">Item5</a></li> 
      <li><a href="">Item6</a></li> 
      <li><a href="">Item7</a></li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</section>

來源

2017-08-25 15:08:42 FelipeAls

謝謝您的回答。但在更新的小提琴中它也不起作用，菜單項不與標題內容對齊，在小分辨率下，列表項「Item7」出現在綠色背景色之外。列表項之間也有空格。 – JonD

一旦媒體查詢發生變化，減少空白空間

回答

相關問題