Question

我有一个引导页面，我遇到一个小问题。问题出在桌面模式下，一列未到达所需的区域。如果我修改了css中的高度，它会向下推动另外两个div。如何让Top div到达工具部分结束的底部区域，而不会推动角落和工具分割？这是否可以使用bootstrap？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<body style="background:#F8F8F8;">
    <p>
        <br/>
    </p>

    <div class="container-fluid">

        <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

                <a href="" class="navbar-brand">
                    <img alt="" src="image.png" height="22" width="81" />
                </a>
            </div>
            <!-- Collection of nav links, forms, and other content for toggling -->
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-left">


                </ul>
            </div>
        </nav>
        <BR>
        <BR>
        <div class="row">
            <div class="col-md-4" "col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="welcome">
                            <div id="container">
      Test info

                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" "col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="prescription">
                            <div id="container">
                                PL
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" "col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="profile">
                            <div id="container">
                               Profile
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                                Ask
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                                Discussions
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6" "col-xs-4">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="contributors">
                            <div id="container2">
                                Top 
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                              Corner
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="ghabox">
                            <div id="container2">
                                Tools
                            </div>

                        </div>
                    </div>
                </div>
            </div>






        </div>



    </div>
    </div>

＆＃13;

Answer 1

如果我理解你的问题，那么角落和工具div应该在Top div内部，以便顶部div包围它们。

 <div class="col-md-6" "col-xs-4">
   <div class="panel panel-default">
      <div class="panel-body">
        <div class="contributors">
          <div id="container2">
            Top 
          </div>
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="ghabox">
                <div id="container2">
                  Corner
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="ghabox">
                <div id="container2">
                  Tools
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

请参阅此plunker

Answer 2

在网站上读取网格嵌套网站后，我有一个解决方案。

`<div class="container"><div class="row"><div class="col-sm-9"><div class="row"><div class="col-sm-6" style="height:100px;backgroundcolor:lightblue;"></div><div class="col-sm-6" style="height:100px;background-color:white;"></div></div><div class="row"><div class="col-sm-12" style="height:150px;background-color:red;"></div></div><div class="row"><div class="col-sm-4" style="height:150px;background-color:orange;"</div><div class="col-sm-4" style="height:150px;background-color:yellow;"</div><div class="col-sm-4" style="height:150px;background-color:green;"></div></div></div><div class="col-sm-3" style="background-color:black;height:400px;"></div>

`

Bootstrap使列适合

2 个答案: