Twitter bootstrap 3 并排对齐2个面板
我需要将三个面板并排对齐,但我无法做到这一点 我尝试使用Twitter bootstrap 3 并排对齐2个面板,twitter-bootstrap-3,Twitter Bootstrap 3,我需要将三个面板并排对齐,但我无法做到这一点 我尝试使用float:left,但没有成功 有人能给我指一下正确的方向吗 <div class="panel panel-default" style="height:350px;width:400px;"> <div class="panel-heading"> 1</div> <div class="panel-body"> <div class="row"> <
float:left
,但没有成功
有人能给我指一下正确的方向吗
<div class="panel panel-default" style="height:350px;width:400px;">
<div class="panel-heading"> 1</div>
<div class="panel-body">
<div class="row">
<div col="col-md-4" >
<div class="panel-body"><img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
<button type="button" class="btn btn-primary btn-block">button</button> </div>
</div>
<br>
<br>
<div col="col-md-4" >
<div style="float:left;">
<div class="panel panel-default" style="height:350px;width:400px;">
<div class="panel-heading"> 2</div>
<div class="panel-body">
<div class="panel-body"><img src="mb4.png" alt="cannot load image"class="img-responsive"/>
<button type="button" class="btn btn-primary btn-block">button</button>
1.
按钮
2.
按钮
您的HTML中有很多错误,即使您使用当前HTML在注释中遵循建议的答案,也无法使其正常工作
正确的HTML
<div class="row">
<div class="col-md-4">
<div class="panel panel-default" style="height:350px;width:400px;">
<div class="panel-heading"> 1</div>
<div class="panel-body">
<img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
<button type="button" class="btn btn-primary btn-block">button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" style="height:350px;width:400px;">
<div class="panel-heading"> 2</div>
<div class="panel-body">
<img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
<button type="button" class="btn btn-primary btn-block">button</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" style="height:350px;width:400px;">
<div class="panel-heading"> 3</div>
<div class="panel-body">
<img src="mb3.jpg" alt="cannot load image" `enter code here`class="img-responsive" />
<button type="button" class="btn btn-primary btn-block">button</button>
</div>
</div>
</div>
</div>
可能存在的副本
<div class="row">
<div class="col-md-4">
<div class="panel">
<div class="panel-heading"></div>
<div class="panel-body">
//Your content goes here
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel">
<div class="panel-heading"></div>
<div class="panel-body">
//Your content goes here
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel">
<div class="panel-heading"></div>
<div class="panel-body">
//Your content goes here
</div>
</div>
</div>
</div>