自动调整网格布局

时间：2016-07-22 14:46:08

标签： html css twitter-bootstrap

我正在尝试实现流体网格布局，其中，我不知道网格列的高度。这取决于所写的内容，这些内容可能是动态的。但是，我可以修复列的宽度。样本结果位于：ruralolympic.org

我是bootstrap的新手并尝试使用html / css以及bootstrap来实现所有这些。

我也已经离开了在线文章在stackoverflow和google搜索了很多。我甚至访问过：http://getbootstrap.com/examples/grid/ 我发现有很多基于JQuery的插件可以用于这项工作，但我喜欢使用简单而通用的代码而不是使用全新的库。请给我一个简单的解决方案，基于html css / bootstrap。这是我尝试过的：

<style>
        .wrapper
        {
            border: 1px solid blue;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            vertical-align: top;
        }
        .wrapcol1, .wrapcol3
        {
            width: 20%;
            min-width: 20%;
            border: 1px solid green;
            vertical-align: top;
        }
        .margincol
        {
            width: 10%;
            min-width: 10%;
            border: 1px solid yellow;
            vertical-align: top;
        }
        .wrapcol2
        {
            width: 35%;
            min-width: 35%;
            border: 1px solid green;
            vertical-align: top;
        }
        .wrapcol1, .margincol, .wrapcol2, .wrapcol3
        {
            display:inline-block;
            vertical-align: top;
        }
        .innerwrapper
        {
            vertical-align: top;
            border: 2px solid red;
            text-align: justify;
        }

    </style>

身体部位如下：

<body>
    <div class="wrapper">
        <span class="innerwrapper">
            <div class="wrapcol1">
                This is Column 1.
            </div>
            <div class="margincol">

            </div>
            <div class="wrapcol2">
                This is Column 2. 
            </div>
            <div class="margincol">

            </div>
            <div class="wrapcol3">
                This is Column 3.
            </div>
            <div class="wrapcol1">
                This is Coumn 4. 
            </div>
            <div class="margincol">

            </div>
            <div class="wrapcol2">
                This is Column 5. 
            </div>
            <div class="margincol">

            </div>
            <div class="wrapcol3">
                This is Column 6. 
            </div>
        </span>         
    </div>
</body>

我缩短了内容以节省空间。

以下是我使用的引导代码：

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <p>
                    This is box 1.
                </p>
            </div>
            <div class="col-lg-1">
            </div>
            <div class="col-lg-4">
                <p>
                    This is box 2. 
                </p>
            </div>
            <div class="col-lg-1">
            </div>
            <div class="col-lg-3">
                <p>
                    This is box 3. 
                </p>
            </div>
            <div class="clearfix visible-lg-block"></div>
            <!-- Row 2 begins here -->
            <div class="col-lg-3">
                <p>
                    This is Box 4. 
                </p>
            </div>
            <div class="col-lg-1">
            </div>
            <div class="col-lg-4">
                <p>
                    This is Box 5.
                </p>
            </div>
            <div class="col-lg-1">
            </div>
            <div class="col-lg-3">
                <p>
                    This is Box 6. 
                </p>
            </div>              

    </div>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

请帮助。

2 个答案:

答案 0 :(得分：1)

Js Fiddle Link：https://jsfiddle.net/372ot3yn/10/embedded/#Result

为什么会这样？

Bootstrap是一个CSS框架，它为我们提供了直接命令，它具有纯粹的css。想象一下，行是一个包装类，它已经具有属性，并且所有已经完成并且使得我们不会有响应性和所有问题。我建议你使用网格，因为它可以更轻松地创建响应式UI而无需编写额外的css代码。如果您愿意，甚至可以进行嵌套。让我们说在你想要制作单独列的三个列的最后一列中，然后再在那里再次使用类行，你就可以了。

如果您想要探索更多信息，请查看原始css样式表并搜索您用于检查所有属性的特定类。 

<div class="container-fluid ">
<div class="row extracss">
    <div class="col-md-4">
          <div class="content-inner">
          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>

          <div>
          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>

          <div class="content-inner">

         Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>
    </div>
    <div class="col-md-4">
      <div class="content-inner">
          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>

          <div class="content-inner"> 
          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>

    </div>  
    <div class="col-md-4">
      <div class="content-inner">
          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>

          <div class="content-inner">
          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>

          <div class="content-inner">

         Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>
                    <div class="content-inner">

         Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>
                    <div class="content-inner">

         Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>
                    <div class="content-inner">

         Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>
                    <div class="content-inner">

         Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content          Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
          </div>

    </div>
</div>
</div>

答案 1 :(得分：0)

在你的wrapcol div上添加这个float:left;，如：

.wrapcol1, .margincol, .wrapcol2, .wrapcol3
    {
        display:inline-block;
        vertical-align: top;
        float:left;
    }
相关问题
最新问题