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

【问题标题】：How to Use Column Resizing With Nine Elements如何使用九个元素调整列大小
【发布时间】：2017-10-04 18:01:15
【问题描述】：

我对 Bootstrap 还很陌生，我想知道如何将网格用于九个 elements。我的网页顶部有一个菜单，它有九个elements、五个text/buttonelements 和四个间距elements（我发现这是最简单的方法得到我想要的），它本身看起来像这样：

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

现在，如果您知道调整大小的工作原理（我想您知道），您就会知道从这里开始情况只会变得更糟。我想知道如何使用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 查看代码 sn-p 时，它可能看起来很奇怪。即使您看到整页结果，您也会看到当在 12 个 column grid 中使用 9 个 elements 时会发生什么。

【问题讨论】：

您不需要col-lg-* 类，因为col-md-* 类是用相同的编号定义的。我的意思是，如果你有col-md-1，col-lg-1 就没用了。

标签： html css twitter-bootstrap grid

【解决方案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 填充所有宽度，您可以创建一个span element 并将border 应用于它。
在从768px 到991px 的大小中，我应用了media-query 来减少您的font-size，因为两行中的5 个elements 不会填满所有行。但是，如果您想要最后一个 element，请填写最后一行，只需将您的 classes 更改为 col-sm-12 col-md-2。
不要使用<center> 标签。它已被弃用。 More info
不要使用 Camel Case 作为类名，用破折号分隔单词。

【讨论】：