问题
So I'm writing some front for my application, and I realized that there is a gap between the previous row and the next row because one of the grid elements is too long, after trying to nest rows I still couldn't get it to work. Heres an example of what it looks like:
https://jsfiddle.net/kkotwal94/f6d9dp98/embedded/result/
<div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Profile <small>My Info</small>
</h1>
<ol class="breadcrumb">
<li class="active"> <i class="fa fa-dashboard"></i>
<Link to="/dashboard/main">Dashboard</Link>
</li>
<li>Profile</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">{"First Name: " + firstName}</li>
<li class="list-group-item">{"Last Name: " + lastName}</li>
<li class="list-group-item">{"Section: " + section}</li>
<li class="list-group-item">{"Gender: " + gender}</li>
<li class="list-group-item">{"Location: " + location}</li>
</ul>
</div>
<div class="panel-footer">Current Profile</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile Changes</div>
<div class="panel-body">
<form action="">
<div class="form-group">
<label htmlFor="firstName">First Name</label>
<input type="firstName" class="form-control" id="firstName" placeholder={firstName} ref="firstName" />
</div>
<div class="form-group">
<label htmlFor="lastName">Last Name</label>
<input type="lastName" class="form-control" id="lastName" placeholder={lastName} ref="lastName" />
</div>
<div class="form-group">
<label htmlFor="section">Section</label>
<input type="section" class="form-control" id="section" placeholder={section} ref="section" />
</div>
<div class="form-group">
<label htmlFor="gender">Gender</label>
<input type="gender" class="form-control" id="gender" placeholder={gender} ref="gender" />
</div>
<div class="form-group">
<label htmlFor="location">Location</label>
<input type="location" class="form-control" id="location" placeholder={location} ref="location" />
</div>
<button class="btn btn-default" onClick={this._onProfileUpdate}>Submit</button>
</form>
</div>
<div class="panel-footer">Update Info</div>
</div>
</div>
<div class="col-lg-7">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">{"First Name: " + firstName}</li>
<li class="list-group-item">{"Last Name: " + lastName}</li>
<li class="list-group-item">{"Section: " + section}</li>
<li class="list-group-item">{"Gender: " + gender}</li>
<li class="list-group-item">{"Location: " + location}</li>
</ul>
</div>
<div class="panel-footer">Current Profile</div>
</div>
</div>
</div>
</div>
</div>
the code is here : http://jsfiddle.net/kkotwal94/f6d9dp98/
I would like for it to look like :
----------
div1 div2
div3 |
|
---------
instead of
----------
div1 div2
|
|
div3
---------
回答1:
js fiddle result (code)
Build your main content structure in columns, not rows. Div 1 and 3 in the same column, div 2 in another. Problem solved?
<div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Profile <small>My Info</small>
</h1>
<ol class="breadcrumb">
<li class="active"> <i class="fa fa-dashboard"></i>
<Link to="/dashboard/main">Dashboard</Link>
</li>
<li>Profile</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">{"First Name: " + firstName}</li>
<li class="list-group-item">{"Last Name: " + lastName}</li>
<li class="list-group-item">{"Section: " + section}</li>
<li class="list-group-item">{"Gender: " + gender}</li>
<li class="list-group-item">{"Location: " + location}</li>
</ul>
</div>
<div class="panel-footer">Current Profile</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">{"First Name: " + firstName}</li>
<li class="list-group-item">{"Last Name: " + lastName}</li>
<li class="list-group-item">{"Section: " + section}</li>
<li class="list-group-item">{"Gender: " + gender}</li>
<li class="list-group-item">{"Location: " + location}</li>
</ul>
</div>
<div class="panel-footer">Current Profile</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile Changes</div>
<div class="panel-body">
<form action="">
<div class="form-group">
<label htmlFor="firstName">First Name</label>
<input type="firstName" class="form-control" id="firstName" placeholder={firstName} ref="firstName" />
</div>
<div class="form-group">
<label htmlFor="lastName">Last Name</label>
<input type="lastName" class="form-control" id="lastName" placeholder={lastName} ref="lastName" />
</div>
<div class="form-group">
<label htmlFor="section">Section</label>
<input type="section" class="form-control" id="section" placeholder={section} ref="section" />
</div>
<div class="form-group">
<label htmlFor="gender">Gender</label>
<input type="gender" class="form-control" id="gender" placeholder={gender} ref="gender" />
</div>
<div class="form-group">
<label htmlFor="location">Location</label>
<input type="location" class="form-control" id="location" placeholder={location} ref="location" />
</div>
<button class="btn btn-default" onClick={this._onProfileUpdate}>Submit</button>
</form>
</div>
<div class="panel-footer">Update Info</div>
</div>
</div>
</div>
</div>
</div>
回答2:
The cols need to add up to 12, or atleast they represent a 12th. If you dont accommodate the space, there will be wrapping issues. Try to use styles instead of CSS adjustments.
http://jsfiddle.net/fn7b5fcu/4/
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Profile <small>My Info</small>
</h1>
<ol class="breadcrumb">
<li class="active"> <i class="fa fa-dashboard"></i>
<Link to="/dashboard/main">Dashboard</Link>
</li>
<li>Profile</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">{"First Name: " + firstName}</li>
</ul>
</div>
<div class="panel-footer">Current Profile</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile Changes</div>
<div class="panel-body">
<form action="">
<div class="form-group">
<label htmlFor="firstName">First Name</label>
<input type="firstName" class="form-control" id="firstName" placeholder={firstName} ref="firstName" />
<button class="btn btn-default" onClick={this._onProfileUpdate}>Submit</button>
</form>
</div>
<div class="panel-footer">Update Info</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">{firstName + " " + lastName}'s Profile</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">{"First Name: " + firstName}</li>
</ul>
</div>
<div class="panel-footer">Current Profile</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
</div>
So in my experience, this is proper use of bootstrap. The goal is to use styles to make your adjustments, which keeps you from adding over-rides to a bare minimal. You only want to override styles when you have to. The idea of the grid is to use bootstrap styles to achieve results, the col numbers are there for a reason, this is how you indicate your structure, via css styles.
He is using col-lg, im showing him how to properly use col-lg. :-)
And yes @turbopipp is absolutely correct, you need to separate the two cols(fixed the tags), nice going, thanks ;-)
回答3:
A simple solution should just be to set div2 to float right:
#div2 {
float: right;
}
来源：https://stackoverflow.com/questions/33335667/bootstrap-grid-system-a-column-being-too-long