Question

我试图了解如何使网格正确满足我的需求，但我心烦意乱。对不起我的英文 - 只看截图。

Answer 1

它非常简单，所需要的只是确保徽标包装器足够大。您还可以使用.clearfix类的div或通过css强制执行高度。这是工作示例

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

垂直列按下其他网格元素// Bootstrap 3

1 个答案: