【发布时间】：2016-01-24 22:58:30
【问题描述】：
所以我正在为我的应用程序编写一些前端，并且我意识到上一行和下一行之间存在间隙，因为其中一个网格元素太长了，在尝试嵌套行之后我仍然无法让它工作。下面是它的外观示例：
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
---------
【问题讨论】：
-
好的，所以 div3 或 cols 正在相互清除，这是您不想要的。所以让我们看看。很难说出你想要什么，因为那里没有任何具体的类名，而是 div1、div2 等。我需要知道的是，你查看它的响应大小是多少？ lg，md，sm，还是什么？如果你去全屏，那么你仍然看到问题吗？当您仅使用 lg 尺寸时，我看到的包装不好。
-
你能把 div 1 和 div 3 放在同一行/列吗？或者如果它进入移动设备，那么 div 2 位于中间是否重要？
-
放在同一行，效果一样
-
所以你必须记住它们必须加起来 12，7+4 = 什么？如果您想要 col7，请确保您有 col5 空白，如果您想要 col 7 和 col4，请确保您还有 col1 空白。有道理？您的规则仅在最大尺寸生效，并且只有行在 md 和更小尺寸生效，这是您的问题。我给你举个例子。
-
@BrianThomas：您不必将它们相加到 12，所有 7+4 所做的就是在右边留下一个 1。它不会导致所描述的问题。
标签： jquery html css twitter-bootstrap