带有固定包装器的引导网格 - 防止列堆叠



正如标题所说,我正在尝试使用带有固定包装器的 Bootstrap 3 网格系统。但是当我调整浏览器的大小时,即使包装器保持相同的大小,列也会堆叠起来?

顺便说一句:我使用的是版本 3,以便在移植网站后可以移动到响应式布局。(这是巨大的,我一个人,所以一步一步是唯一的选择......

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
    <style>
            /* Custom container */
            .container-fixed {
              margin: 0 auto;
              max-width: 800px;
              min-width: 800px;
              width: 800px;
                                  background-color:#C05659;
            }
            .container-fixed > hr {
              margin: 30px 0;
            }
    </style>
  </head>
  <body>
        <div class="container-fixed">
            <div class="row">
              <div class="col-md-4">.col-md-4</div>
              <div class="col-md-4">.col-md-4</div>
              <div class="col-md-4">.col-md-4</div>
            </div>
            <hr>
        </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

smmdlg等 cols 响应式包装/堆叠。使用非堆叠col-xs-*类...

<div class="container">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div>

演示:http://bootply.com/80085

编辑:引导4,不再需要指定xs

<div class="container-fluid">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
</div>

相关内容

  • 没有找到相关文章

最新更新