6
私は自分のアプリケーションのフロントを書いています。グリッド要素の1つが長すぎるため、前の行と次の行の間にギャップがあることに気付きました行を入れ子にしようとしたが、それでも動かすことができなかった。相続人は、それがどのように見えるかの例：ブートストラップグリッドシステム、列が長すぎる
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>
コードはここにある：
----------
div1 div2
div3 |
|
---------
代わりの
：それが見えるようにするために、私は希望 http://jsfiddle.net/kkotwal94/f6d9dp98/
----------
div1 div2
|
|
div3
---------
フロートをクリアします。 –
これで、div3かcolsのどちらかが互いにクリアされています。これはあなたが望んでいないものです。だから見てみましょう。そのdiv1、div2などの代わりに具体的なクラス名を持っていないので、あなたが望むものを伝えるのは難しいです。 私が知る必要があるのは、どの応答サイズですか？ lg、md、sm、または何ですか？フルスクリーンになっても問題は解決しますか？私が見ているのは、あなたがlgサイズだけに行くときの悪いラップです。 – blamb
div1とdiv3を同じ行/列に配置できますか？それとも、モバイルに入る場合、div 2が真ん中にあることが重要ですか？ – Sam