ブートストラップグリッドの配置が正しく表示されない
ダルトン2
私は次のようにブートストラップコードを書きました-
.panel-heading {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
a, a:hover, a:visited, a:active {
text-decoration: none !important;
color: white !important;
}
span.dpi1 {
color: crimson;
}
span.dpi2 {
color: red;
}
table,td,tr{
border-top-color:
}<div>
<div>
<div class="panel panel-primary">
<div class="panel-body" style="margin-left: 10px;">
<div class="row">
<div class="col-md-12">
<label>Enter <span class="dpi1">*</span></label>
<input id="searchText" type="text" size="50" autofocus="autofocus" />
<button id="searchButton" type="button" class="btn btn-primary" >Search</button>
</div>
<div class="pull-right">
<label><span class="dpi2">* Mandatory</span></label>
</div>
</div>
</div>
</div>
<br />
<div>
<div class="row pull-right">
<button type="button" class="btn btn-primary" id="expand"><span class="glyphicon glyphicon-arrow-down">Expand All</span></button>
<button type="button" class="btn btn-primary" id="collapse"><span class="glyphicon glyphicon-arrow-up">Collapse All</span></button>
</div>
<br />
<br />
<div class="row">
<div class="panel-group accord" id="showAgain">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseA"><span style="color: white">Summary</span></a></div>
<div id="collapseA" class="panel-collapse collapse in">
<div class="panel-body" style="white-space: nowrap; overflow-y: scroll;">
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseB"><span style="color: white">Information</span></a></div>
<div id="collapseB" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>xx</th>
<th>xxx</th>
<th>xxx</th>
</tr>
</thead>
<tr>
<td><b>Customer No</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>First Name</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Last Name</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Address</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Contact No.</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseC"><span style="color: white">Information</span></a></div>
<div id="collapseC" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapse1"><span style="color: white">Information</span></a></div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapse2"><span style="color: white">Information</span></a></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
</div>すべての行が正しく表示されますが、2つのパネルがある2番目の行は他の行と適切に配置されておらず、表示は次のようになります-
2行目が正しく配置されていません。誰かがそれを他の行に正しく揃えるのを手伝ってもらえますか？
ジシュヌVS
質問の正しい意味がわかりません、これを探していますか
.panel-heading {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
a, a:hover, a:visited, a:active {
text-decoration: none !important;
color: white !important;
}
span.dpi1 {
color: crimson;
}
span.dpi2 {
color: red;
}
table, td, tr {
border-top-color:
}
.accord {
margin-top:15px;
float:left;
width:100%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-body" style="margin-left: 10px;">
<div class="row">
<div class="col-md-12">
<label>Enter <span class="dpi1">*</span></label>
<input id="searchText" type="text" size="50" autofocus="autofocus" />
<button id="searchButton" type="button" class="btn btn-primary" >Search</button>
</div>
<div class="pull-right">
<label><span class="dpi2">* Mandatory</span></label>
</div>
</div>
</div>
</div>
<br />
<div>
<div class="col-xs-12 pull-right text-right">
<button type="button" class="btn btn-primary" id="expand"><span class="glyphicon glyphicon-arrow-down">Expand All</span></button>
<button type="button" class="btn btn-primary" id="collapse"><span class="glyphicon glyphicon-arrow-up">Collapse All</span></button>
</div>
<div class="panel-group accord" id="showAgain">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseA"><span style="color: white">Summary</span></a></div>
<div id="collapseA" class="panel-collapse collapse in">
<div class="panel-body" style="white-space: nowrap; overflow-y: scroll;">
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
<tr>
<th>XXXXXXX</th>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseB"><span style="color: white">Information</span></a></div>
<div id="collapseB" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>xx</th>
<th>xxx</th>
<th>xxx</th>
</tr>
</thead>
<tr>
<td><b>Customer No</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>First Name</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Last Name</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Address</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Contact No.</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapseC"><span style="color: white">Information</span></a></div>
<div id="collapseC" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapse1"><span style="color: white">Information</span></a></div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="panel-group accord">
<div class="panel panel-primary">
<div class="panel-heading"><a data-toggle="collapse" href="#collapse2"><span style="color: white">Information</span></a></div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body" style="overflow: scroll; white-space: nowrap; overflow-y: scroll;">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
<th>XXXXXXX</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
<td>XXXXXXX</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Galaxy TabSでブートストラップグリッドが正しく表示されない
- 2
ブートストラップ4のドロップダウンが正しく配置されていない
- 3
ブートストラップの錠剤が正しく表示されない
- 4
ブートストラップグリッドが正しく位置合わせされていない
- 5
ブートストラップ4グリッドが正しく位置合わせされていない
- 6
LaravelBladeでブートストラップが正しく表示されない
- 7
Firefoxでブートストラップ列が正しく表示されない
- 8
JsfiddleReactコードでブートストラップテーブルが正しく表示されない
- 9
ブートストラップdatepickertandtimepickerグリフィコンが正しく配置されていません
- 10
Firefoxでブートストラップテーブルの境界線が正しく表示されない
- 11
スパンのブートストラップの例が正しく表示されない
- 12
剣道グリッドテンプレートがブートストラップトグルを正しく表示しておらず、列にチェックボックスのみが表示されている
- 13
Firefoxでのみブートストラップフォームが正しく表示されない
- 14
ブートストラップボタンの色がChromeで正しく表示されない（Machine Mac）
- 15
ブートストラップチェックボックスボタンが正しく表示されない
- 16
ブートストラップ カルーセルが応答しない (Jquery が正しく配置された)
- 17
ブートストラップ：同じhtmlが正しくレンダリングされない
- 18
ブートストラップ4フィードバックテキストが正しくレンダリングされない
- 19
ブートストラップグリッドアイテムが正しくレンダリングされない
- 20
プロットヒストグラムが正しく表示されない
- 21
ブートストラップ3のドロップダウン矢印がモバイルで正しく表示されない
- 22
React-ブートストラップグリッドの内容が表示されない
- 23
ブートストラップ3.0モーダルでリーフレットマップが正しく表示されない
- 24
ライブラリをAndroid23.2.1にアップグレードした後、ステータスバーのデフォルトの高さが正しく表示されない
- 25
ブートストラップフォームラベルが正しく表示されない
- 26
コンテンツがグリッドシステムの正しい位置に表示されません。ブートストラップ
- 27
React-ブートストラップナビゲーションバーが正しく表示されない
- 28
検索バーが正しく表示されない-ブートストラップとレール
- 29
ブートストラップナビゲーションバーが正しく表示されない
コメントを追加