Bootstrap 3.3 - 一行div

时间:2018-03-27 09:38:45

标签: css html5 twitter-bootstrap-3

我正在学习Bootstrap,在对stackoverflow进行一些搜索之后,我想知道是否可以轻松地将div col变成多行。

这是我到目前为止所做的:

HTML:

<html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>testing</title>
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-12">1st level with 12 col
        <div class="row">
          <div class="col-md-8">2nd level with 8 col
          <div class="row">
            <div class="col-md-4">3rd level with 4 col</div>
            <div class="col-md-6 col-md-offset-2">3rd level with 6 col
            <div class="row">
              <div class="col-md-3 col-md-offset-1">4th level with 3 col</div>
              <div class="col-md-5 col-md-offset-1">4th level with 5 colonnes</div>
            </div>
            </div>
          </div>
          </div>
          <div class="col-md-4">2nd level with 4 col</div>
        </div>
      </div>
    </div>
  </div><!-- /.container -->
  <script src="js/boostrap.js" charset="utf-8"></script>
  <script src="js/jquery.js" charset="utf-8"></script>
  </body>
  </html>
</html>

CSS:

body{
  padding-top: 10px;
}

[class*="col-"], footer{
  background-color: lightgreen;
  border: 2px solid black;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
}

.container{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/*--------------------------------------- Responsive ---------------------------------------*/

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

我得到了这个: result of the code bellow

我想理解为什么第3级6级,4级3col和第4级5级显示为两行,以及如何重现这个以集成psd。 (例如,获得一个带有3col和4rows的div)

谢谢你

编辑:答案:

以下是我所理解的,如果我想要多行多列,我必须像这样细分我的模板:

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-8">
            <div class="row" id="top-row"></div>
            <div class="row" id="bottom-row"></div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4" id="quote-2-high"></div>
    </div>
</div>

在一行中我创建了两个div,每个div在单独的行中,以使主div设置为两行。 感谢Jeremy和Mustapha Aoussar,我现在知道如何使用它,我也知道有一些有用的工具可以帮助我清楚地看到bootstrap的网格系统:http://shoelace.io/

0 个答案:

没有答案