当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Bootstrap make column fit

问题描述:

I have a bootstrap page where I am experiencing one minor issue. The issue is in desktop mode, one column does not reach the area where it needs to. If I modify the height in the css it pushes the other two divs downward. How do i make the Top div reach the bottom area where the tools section end without pushing corner and tools div down? Is this possible with bootstrap?

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

网友答案:

If I understand your question well, the corner and tools div should be inside the Top div for the Top div to wrap around them.

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

See this plunker

网友答案:

After reading the site the grid nesting site on bootstrap, I have a solutions.

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

`

分享给朋友:
您可能感兴趣的文章:
随机阅读: