Bootstrap网格系统，列太长

Question

所以我为我的应用程序编写了一些前端，并且我意识到前一行和下一行之间存在间隙，因为其中一个网格元素太长，在尝试嵌套行之后我仍然无法和＃39;让它发挥作用。下面是一个例子：

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}&#39;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}&#39;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}&#39;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
---------

Answer 1

js fiddle result（code）

在列中构建主要内容结构，而不是行。 Div 1和3在同一列中，div 2在另一列中。问题解决了吗？

<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}&#39;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}&#39;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}&#39;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>

Answer 2

cols需要加起来12，或者至少它们代表12。如果你不适应这个空间，就会出现包装问题。尝试使用样式而不是CSS调整。

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}&#39;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}&#39;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}&#39;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>

根据我的经验，这是正确使用bootstrap。我们的目标是使用样式进行调整，这样您就不会将过度骑行添加到最小的位置。您只需要在必要时覆盖样式。网格的想法是使用bootstrap样式来实现结果，col数是有原因的，这是你通过css样式指示你的结构的方式。

他正在使用col-lg，我告诉他如何正确使用col-lg。 :-)

是的@turbopipp是绝对正确的，你需要分开两个cols（修复标签），很好，谢谢; - ）

Answer 3

一个简单的解决方案应该是将div2设置为右浮动：

#div2 {
    float: right;
}