使用引导程序在面板中的表格布局

问题描述：

我似乎无法在保存按钮和电子邮件标签之间放置换行符。我试着用<p>标签将它往下移。我尝试过使用form-inline和form-horizontal，但只会让事情变得更糟。

或者我想将保存按钮直接放在文本框旁边，但似乎无法实现此目的。

以jsfiddle为例https://jsfiddle.net/omyuzuu3/。

<div class="col-sm-4" id="leftCol"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
      <strong>Account Details</strong><p> 
      <hr> 
      <form class="form" method="post" > 
       <div class="form-group"> 
       <label for="exampleInputName2">Username</label><p> 
       <input name="txtUsername" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->username; ?>">   
       </div> 

       <div class="form-group"> 
       <button type="submit" name="btnSaveUsername" class="btn btn-primary btn-sm pull-right">Save</button> 
       <p> 
       </div> 

       <div class="form-group"> 
       <p> 
       <label for="exampleInputName2">E-mail</label><p> 
       <input name="txtEmail" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->email; ?>"> 

       </div> 

       <div class="form-group"> 
       <button type="submit" name="btnSaveEmail" class="btn btn-primary btn-sm pull-right">Save</button> 
       </div> 

       </form> 
     </div> 
    </div> 
</div>

答

您在保存按钮上使用float:right。

float元素超出正常流动的，所以它的容器的高度不占浮动元素

截图：https://i.imgur.com/xdvP23p.png

的clearfix属性添加到浮动元素的容器会解决这个问题

屏幕截图：https://i.imgur.com/HiNC61Q.png

Bootstrap已包含.clearfix类用于添加clearfix css属性

What is clearfix ?

使用引导程序在面板中的表格布局

相关推荐