垂直列向下推其他网格元素// Bootstrap 3 [关闭]答案

【问题标题】：Vertical column pushed down other grid elements // Bootstrap 3 [closed]垂直列向下推其他网格元素// Bootstrap 3 [关闭]
【发布时间】：2016-04-16 06:17:03
【问题描述】：

我试图了解如何使网格正确满足我的需求，但我打破了主意。对不起我的英语 - 看看截图。

>What I'm getting!<

>What I need!<

【问题讨论】：

你能贴出你试过的代码吗？
是的，当然。这是我的网格的简单版本 - link
很难从您的问题中看出，但我假设您要确保一行中的所有列保持相同的高度。如果是这样，请查看此问题的答案：stackoverflow.com/questions/19695784/…
@sean 我找到了这个解决方案，但现在我需要在 LOGO div 下添加块侧边栏：jsfiddle.net/kindsage/e7L6Lc1n

标签： css twitter-bootstrap grid

【解决方案1】：

这很简单，您只需要确保徽标包装足够大。您还可以将 div 与 .clearfix 类一起使用或通过 css 强制执行高度。这是工作示例

http://codepen.io/anon/pen/MyGKEL

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <style>
        #logo img {
            width: 100%;
            height: auto;
        }

        #sidebar {
            border: 1px solid black;
            clear: both;
            float: left;
        }

        #logo {
            padding: 10px 0
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2" id="logo">

                <img src="http://dummyimage.com/200x400" width="100%" />
            </div>  

            <div class="col-md-2 bullet">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
            </div> 

            <div class="col-md-2 bullet">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
            </div>

             <div class="col-md-2 bullet">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
            </div>

            <div class="col-md-4" id="phone">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
            </div>

            <div class="col-md-10" id="nav">

            <nav class="navbar navbar-default navbar-static-top">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
</nav>


            <div class="col-md-9">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo aLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut 
       </div>
            </div>

            <div class="col-md-2" id="sidebar">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a
            </div>

            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

谢谢。我会尝试！你怎么看待这件事？ jsfiddle.net/kindsage/e7L6Lc1n如何在LOGO div下添加侧边栏？
我更新了代码，以便您查看它是如何在徽标包装下使用固定高度和侧边栏的。
我明白了。这是主要问题 - 徽标的高度不固定
那么你可以尝试使用 float 和 clear css prop - 再次查看我的答案
汪！谢谢！我对您的代码进行了一些更改，我认为这就是我得到的！ - codepen.io/anon/pen/MyGKEL