Question

我对引导网格系统有一个问题让我感到困惑，我有一个2列布局，成为移动设备上的一列（col-xs-12）布局。

我遇到的问题是，在大屏幕上，如果我的侧边栏高于我的“标题div”，则占用空白。

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 header">header</div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 sidebar">sidebar</div>
        <div class="col-lg-8 col-sm-8 col-xs-12 main_content">main_content</div>
    </div>
</div>

继承人jsbin： https://jsbin.com/helizemefa/edit?html,css,output

也许我现在正站在线上..

感谢您的帮助！

Answer 1

＆＃13;

.header{
  background-color:red;
}

.sidebar {
  background-color:yellow;
  
}

.main_content {
  background-color:green;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  
  
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 header">header</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-right sidebar">sidebar</div>
      <div class="col-lg-8 col-lg-8 col-sm-8 col-xs-12 main_content">main_content</div>
    </div>
  </div>  
</body>
</html>

＆＃13;

您可以在侧边栏上添加pull-right，例如

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 sidebar pull-right">sidebar</div>

Bootstrap Column侧栏高度

1 个答案: