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>