如何使用九個元素的列大小調整

我對Bootstrap相當新，我想知道如何使用九個網格的element s。我有一個菜單保留在我的網頁頂部，它有九個element s，五個text/buttonelement s和四個間距element s（我發現這是獲得我想要的最簡單的方法），並且本身，它看起來像這樣：如何使用九個元素的列大小調整

這看起來不錯，但是，我在引導學會了如何使我的網頁調整大小取決於屏幕尺寸。下面是它看起來像在非大版（不帶調整大小的變化）：

現在，如果你知道如何調整工作（我會這樣想，你這樣做），你知道，它從這裏變得更糟。我想知道如何使用grid來允許我的菜單根據屏幕大小自動調整大小。

代碼：

#menuBar { 
 
    height: 85px; 
 
    width: 100%; 
 
    background-color: #F2F2F2; 
 
    position: relative; 
 
} 
 
.titleButton, #contactButton { 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 30px; 
 
    border-bottom: 3px groove; 
 
    border-radius: 2px; 
 
    line-height: 2.5; 
 
} 
 
.titleSpacer { 
 
    margin-right: 10%; 
 
} 
 
.titleButton, .titleSpacer, #contactButton { 
 
    display: inline; 
 
} 
 
.titleButton:hover, #contactButton:hover { 
 
    cursor: pointer; 
 
    border-bottom: 2px groove black; 
 
}

<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>CyanCoding | Home</title> 
 
    <link href="index.css" rel="stylesheet" type="text/css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="index.js"></script> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto" rel="stylesheet"> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
    <div class = "container-fluid"> 
 
     <div id = "menuBar"> 
 
      <center> 
 
      <div class = "row-fluid"> 
 
       <div class = "titleButton col-lg-offset-1 col-md-offset-1 col-sm-offset-6 col-xs-offset-12" id = "homeButton">Home</div> 
 
       <div class = "titleSpacer col-lg-1 col-md-1 col-sm-6 col-xs-12"></div> 
 
       <div class = "titleButton col-lg-1 col-md-1 col-sm-6 col-xs-12" id = "programsButton">Programs</div> 
 
       <div class = "titleSpacer col-lg-1 col-md-1 col-sm-6 col-xs-12"></div> 
 
       <div class = "titleButton col-lg-1 col-md-1 col-sm-6 col-xs-12" id = "newsButton">News</div> 
 
       <div class = "titleSpacer col-lg-1 col-md-1 col-sm-6 col-xs-12"></div> 
 
       <div class = "titleButton col-lg-1 col-md-1 col-sm-6 col-xs-12" id = "aboutButton">About</div> 
 
       <div class = "titleSpacer col-lg-1 col-md-1 col-sm-6 col-xs-12"></div> 
 
       <div id = "contactButton" class = "col-lg-1 col-md-1 col-sm-6 col-xs-12">Contact</div> 
 
       <div class="col-lg-1 col-md-1 col-sm-1 hidden-xs"></div> 
 
      </div> 
 
      </center> 
 
     </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

P.S我真的只是改變了結果col-lg因爲我在大屏幕上觀看它，想通後，我能解決別人。如果你可以在你的答案中得到其他尺寸的工作，這是非常受歡迎的。

P.P.S查看代碼片段時，它可能看起來很奇怪。即使您看到整頁結果，也會看到在十二個columngrid中使用九個element時會發生什麼情況。

來源

2017-10-04 CyanCoding

你不需要'col-lg- *'類，因爲'col-md- *'類是用相同的數字定義的。我的意思是，如果你有'col-md-1'，'col-lg-1'沒用。 –

還有就是要實現這一目標的一種方法：

代碼：

#menuBar { 
 
    background-color: #F2F2F2; 
 
    position: relative; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 
.title-button { 
 
    font-size: 30px; 
 
    border-bottom: 2px groove; 
 
    text-align: center; 
 
    line-height: 2.5; 
 
} 
 
.title-button:hover { 
 
    cursor: pointer; 
 
    border-bottom: 2px groove black; 
 
} 
 
@media(min-width: 768px) and (max-width: 991px) { 
 
    .title-button { 
 
    font-size: 20px; 
 
    } 
 
}

<div class="container-fluid"> 
 
    <div id="menuBar" class="clearfix"> 
 
    <div class="row-fluid"> 
 
     <div class="title-button col-sm-2 col-sm-offset-1">Home</div> 
 
     <div class="title-button col-sm-2">Programs</div> 
 
     <div class="title-button col-sm-2">News</div> 
 
     <div class="title-button col-sm-2">About</div> 
 
     <div class="title-button col-sm-2">Contact</div> 
 
    </div> 
 
    </div> 
 
</div>

Codepen here

正如你可以看到：

我刪除了分隔符，因爲它不是一個好辦法。如果你不想讓你的border-bottom填充所有的寬度，你可以創建一個spanelement並將border應用於它。
在從768px到991px大小我申請一個media-query降低您的font-size因爲5 element S IN兩行不填都行。但是，如果您想要最後一個element，請填寫所有最後一行，將您的class es更改爲col-sm-12 col-md-2。
請勿使用<center>標記。它已被棄用。More info
請勿爲您的類名使用駱駝案例，請用短劃線分隔這些單詞。

來源

2017-10-04 18:32:07

如何使用九個元素的列大小調整

回答

相關問題