Bootstrap 网格系统，一列太长
[英] Bootstrap grid system, a column being too long
本文介绍了Bootstrap 网格系统，一列太长的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我正在为我的应用程序写一些前端，我意识到前一行和下一行之间存在间隙，因为其中一个网格元素太长，在尝试嵌套行后我仍然无法让它工作.这是它的外观示例:
https://jsfiddle.net/kkotwal94/f6d9dp98/embedded/result/
<div class="container-fluid"><div class="row"><div class="col-lg-12"><h1 class="page-header">个人资料<small>我的信息</small><ol class="面包屑">
<i class="fa fa-dashboard"></i><Link to="/dashboard/main">仪表板</Link><li>个人资料</li></ol>
<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">{"名字:" + firstName}</li><li class="list-group-item">{"Last Name:" + lastName}</li><li class="list-group-item">{"Section:" + section}</li><li class="list-group-item">{"性别:" + 性别}</li><li class="list-group-item">{"Location:" + location}</li>
<div class="panel-footer">当前配置文件</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">名字</label><input type="firstName" class="form-control" id="firstName" placeholder={firstName} ref="firstName"/>
<div class="form-group"><label htmlFor="lastName">姓氏</label><input type="lastName" class="form-control" id="lastName" placeholder={lastName} ref="lastName"/>
<div class="form-group"><label htmlFor="section">Section</label><input type="section" class="form-control" id="section" placeholder={section} ref="section"/>
<div class="form-group"><label htmlFor="gender">性别</label><input type="gender" class="form-control" id="gender" placeholder={gender} ref="gender"/>
<div class="form-group"><label htmlFor="location">位置</label><input type="location" class="form-control" id="location" placeholder={location} ref="location"/>
<button class="btn btn-default" onClick={this._onProfileUpdate}>提交</button></表单>
<div class="panel-footer">更新信息</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">{"名字:" + firstName}</li><li class="list-group-item">{"Last Name:" + lastName}</li><li class="list-group-item">{"Section:" + section}</li><li class="list-group-item">{"性别:" + 性别}</li><li class="list-group-item">{"Location:" + location}</li>
<div class="panel-footer">当前配置文件</div>
代码在这里:http://jsfiddle.net/kkotwal94/f6d9dp98/
我希望它看起来像:
----------div1 div2div3 ||---------
代替
----------div1 div2||div3---------
解决方案
js fiddle result(代码)
以列而非行的形式构建您的主要内容结构.Div 1 和 3 在同一列中，div 2 在另一列中.问题解决了吗?
<div class="container-fluid"><div class="row"><div class="col-lg-12"><h1 class="page-header">个人资料<small>我的信息</small><ol class="面包屑">
<i class="fa fa-dashboard"></i><Link to="/dashboard/main">仪表板</Link><li>个人资料</li></ol><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">{"名字:" + firstName}</li><li class="list-group-item">{"Last Name:" + lastName}</li><li class="list-group-item">{"Section:" + section}</li><li class="list-group-item">{"性别:" + 性别}</li><li class="list-group-item">{"Location:" + location}</li>
<div class="panel-footer">当前配置文件</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">{"名字:" + firstName}</li><li class="list-group-item">{"Last Name:" + lastName}</li><li class="list-group-item">{"Section:" + section}</li><li class="list-group-item">{"性别:" + 性别}</li><li class="list-group-item">{"Location:" + location}</li>
<div class="panel-footer">当前配置文件</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">名字</label><input type="firstName" class="form-control" id="firstName" placeholder={firstName} ref="firstName"/>
<div class="form-group"><label htmlFor="lastName">姓氏</label><input type="lastName" class="form-control" id="lastName" placeholder={lastName} ref="lastName"/>
<div class="form-group"><label htmlFor="section">Section</label><input type="section" class="form-control" id="section" placeholder={section} ref="section"/>
<div class="form-group"><label htmlFor="gender">性别</label><input type="gender" class="form-control" id="gender" placeholder={gender} ref="gender"/>
<div class="form-group"><label htmlFor="location">位置</label><input type="location" class="form-control" id="location" placeholder={location} ref="location"/>
<button class="btn btn-default" onClick={this._onProfileUpdate}>提交</button></表单>
<div class="panel-footer">更新信息</div>
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
---------
解决方案
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>
这篇关于Bootstrap 网格系统，一列太长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
