带有固定包装器的 Bootstrap 网格 - 防止列堆积 [英] Bootstrap grid with fixed wrapper - Prevent columns from stacking up

查看：31
本文介绍了带有固定包装器的 Bootstrap 网格 - 防止列堆积的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<头><title>Bootstrap 101 模板</title><元名称=视口"内容=宽度=设备宽度，初始比例=1.0"><!-- 引导程序--><link rel="样式表";href=http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- HTML5 shim 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!--[如果是 IE 9]><script src=../../assets/js/html5shiv.js"></script><script src=../../assets/js/respond.min.js"></script><![endif]--><风格>/* 自定义容器 */.container-fixed {边距:0 自动；最大宽度:800px；最小宽度:800px；宽度:800px；背景颜色:#C05659;}.container-fixed >小时{边距:30px 0;}</风格><身体><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>

<小时>

<!-- jQuery(Bootstrap 的 JavaScript 插件所必需的)--><script src=http://code.jquery.com/jquery.min.js"></script><!-- 包含所有已编译的插件(如下)，或根据需要包含单个文件 --><script src=http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

解决方案

sm,md,lg,etc.. cols wrap/stack 响应.使用非堆叠 col-xs-* 类...

<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>

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

Bootstrap 4，不再需要指定 xs..

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

As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size?

BTW: I'm using version 3 so that I can move to a responsive layout after I have ported the site. (Which is huge and I'm alone, so step by step is the only option ...)

<!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>

解决方案

The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...

<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>

Demo: http://bootply.com/80085

EDIT: Bootstrap 4, the xs no longer needs to be specified..

<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>

这篇关于带有固定包装器的 Bootstrap 网格 - 防止列堆积的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆