用我自己的引导类分开?

时间:2017-04-15 10:28:10

标签: html css twitter-bootstrap

我使用bootstrap。我是否需要使用自己的类分开行?因为如果我不这样做,我不能设置该部分的背景为例。哪一段代码更好?

<div class="container">
    <nav class="row"></nav>
    <section class="row">
      <div class="col-sm-3">
          some text
      </div>
    </section>
</div>

<div class="container">
    <div class="row">
      <nav></nav>
    </div>
    <div class="row">
      <section>
        <div class="col-sm-3">
          some text
        </div>
      </section>
    </div>
  </div>

1 个答案:

答案 0 :(得分:0)

您可以根据需要同时使用和更改部分背景。只需添加自己的类并设置css。

nav{
height:30px !important;
width:100%;
display:block;
background-color: red;
}

.containercolor{
background-color: black;
margin:0px;
}

.row{
margin: 0px !important;
}

.sectionrow{
height: 200px;
}

.colcolor{
background-color: green;
height:100%;
}

.sectionrow{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav>
</nav>

<div class="container-flex containercolor">
    <div class="row sectionrow">
        <div class="col-xs-6">
        </div>
        <div class="col-xs-6 colcolor">
        </div>
    </div>
</div>

<div class="container-flex ">
    <div class="row containercolor">
      <nav></nav>
    </div>
    <div class="row">
      <section class="sectionrow">
        <div class="col-sm-3">
          some text
        </div>
      </section>
    </div>
</div>