Question

我对Bootstrap很新，我想知道如何使用九个element的网格。我有一个菜单位于我的网页顶部，它有九个element个，五个text / button element个和四个空格element s（我发现这是获得我想要的最简单方法），而且它本身看起来像这样：

这看起来很棒，但是，我在Bootstrap中学到了如何根据屏幕大小调整页面大小。以下是非大型版本中的内容（没有调整大小更改）：

现在，如果你知道如何调整大小（我想你会这样做），你知道它只会从这里变得更糟。我想知道如何使用grid允许我的菜单根据屏幕大小自动调整大小。

代码：

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

P.S我真的只是改变了col-lg的结果，因为我在大屏幕上观看它并且发现我可以稍后修复其他的。如果您可以在其答案中使用其他尺寸，则更为可取。

P.P.S在查看代码片段时，它可能看起来很奇怪。即使您看到整页结果，也会看到在十二element column中使用九个grid时会发生什么。

Answer 1

有一种方法可以实现这一目标：

代码：

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

Codepen here

如你所见：

我删除了分隔符，因为这不是一个好方法。如果您不希望border-bottom填充所有宽度，则可以创建span element并将border应用于此。
在768px到991px的尺寸中，我应用了media-query来减少font-size，因为两行中有5 element个＆＃39} ; t填满所有行。但是，如果您想要上一个element，请填写最后一行，只需将class es更改为col-sm-12 col-md-2。
不要使用<center>标记。它被弃用了。 More info
不要将Camel Case用于您的班级名称，请用短划线分隔。

如何使用九个元素的列调整大小

1 个答案: