所以我在为我的应用程序编写一些前端，我意识到在前一行和下一行之间有一个间隙，因为其中一个网格元素太长，在尝试嵌套行之后，我仍然无法使它工作。下面是一个看起来像什么的示例：
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>代码如下：http://jsfiddle.net/kkotwal94/f6d9dp98/
我希望它看起来像这样：
----------
div1 div2
div3 |
|
---------代替
----------
div1 div2
|
|
div3
---------
3条答案
按热度按时间yi0zb3m41#
在列中而不是行中构建您的主要内容结构。Div 1和3在同一列中，div 2在另一列中。
2skhul332#
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/
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 ;-)
dly7yett3#
一个简单的解决方案是将div2设置为右浮动：