Bootstrap网格对齐无法正确显示
我编写了一个自举代码，如下所示 -
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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>
所有行都正常，但第二行有两个面板没有与其他行正确对齐，显示器看起来像这样 -
第二行未正确对齐。有人可以帮我正确地与其他行对齐吗？
3 个答案:
答案 0 :(得分：1)
使用Bootstrap时，.row必须包含在.container或.container-fluid中。您应该在this Bootply中添加2 .container-fluid
这并不能解决您问题中描述的问题：您还应将.col-xs-12（xs或其他宽度间隔）添加为每个.row的直接子项。完成后，您应该将.pull-right中的“网格修饰符”从.row移动到这些列元素;否则我很确定它与Bootstrap网格不相称。
- 行必须放在.container（固定宽度）或.container-fluid（全宽）内，以便正确对齐和填充。
- 使用行创建水平的列组。
- 内容应放在列中，只有列可能是行的直接子项。
- 预定义的网格类（如.row和.col-xs-4）可用于快速制作网格布局。 less mixins也可用于更多语义布局。
- 等
答案 1 :(得分：0)
我不明白问题的正确含义，你在找这个吗？
.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>
答案 2 :(得分：0)
如果你不想在容器上包装东西，你只需要为col-md-4和col-md-8添加一个包装行类，以便正确对齐这些div并在完整视图上。 这样做
<div class="row">
<div class="row">
<div class="col-md-4">
而不是
<div class="row">
<div class="col-md-4">
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？