0
我对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时会发生什么情况。
你不需要'col-lg- *'类，因为'col-md- *'类是用相同的数字定义的。我的意思是，如果你有'col-md-1'，'col-lg-1'没用。 –