Question

请参阅此plnkr：http://plnkr.co/edit/wun8TRdaJoaJTCC4DJ0Q

<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">
    <div class="intro">
      <div class="content">
        <h1>
                should be green
            </h1>
        <div class="col-xs-12">
          should be green, why am I blue?
        </div>
      </div>
      <div class="mask">
        should be blue
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

每当你使用任何列类（col-xs-12或col-md-6或任何东西）时，你必须用<div class="row"></div>括起该类。这将清除你的浮动。这是Bootstrap的框架。你必须从＆＃34; row＆＃34;开始每次使用时都会上课＆＃34; col - *＆＃34;类。

    <div class="container">
      <div class="intro">
        <div class="content">
          <h1>
                should be green
          </h1>
          <div class="row">
            <div class="col-xs-12" style="">
             should be green, why am I blue?
           </div>
          </div>
        </div>
        <div class="mask">
      should be blue
    </div>
      </div>
    </div>

奇怪的行为：为什么引导列改变了容器高度？

1 个答案: