html - Bootstrap 表单列未与非表单列对齐？

我有这段代码(jsfiddle - 确保将“演示”框架拉伸(stretch)到足以使按钮位于一行上):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UI-Compatible" content="IE=edge /">
  <meta name="viewport" content="width=device-width, initial-scale=1 /">


  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">

  <br/><br/><br/>

    <div class="row">         

      <form class="form-horizontal" role="form">
        <div class="form-group">


           <label for="pfSel" class="col-sm-2 control-label">Select Product Family:</label>

           <div class="col-sm-4">
             <select class="form-control" id="pfSel"></select>
           </div>

          <label for="pidSel" class="col-sm-2 control-label">Select PID:</label>            

          <div class="col-sm-4">
             <select class="form-control" id="pidSel"></select>
          </div> 

        </div>
      </form>

    </div>    

    <div class="row">
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
      <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>  
    </div>

  </div>

</body>

第一行是表单，第二行是表单外的按钮，用于指示列的位置。如您所见，表单中的选择下拉菜单未与其下方的按钮对齐。下拉菜单的左边框与按钮的关系不同。为什么会发生这种情况，有什么办法可以解决吗？谢谢。

最佳答案

.row元素添加负边距以说明 Bootstrap 的 .col-* 中使用的填充定义。 .form-horizontal表格也这样做，所以你不应该包装你的 <form>里面的元素<div class="row"> .

更新您的标记如下:

<div class="container">       
      <form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="pfSel" class="col-sm-2 control-label">Select Product Family:</label>
            <div class="col-sm-4">
                <select class="form-control" id="pfSel"></select>
            </div>

            <label for="pidSel" class="col-sm-2 control-label">Select PID:</label>            
            <div class="col-sm-4">
                <select class="form-control" id="pidSel"></select>
            </div> 
        </div>
    </form>

    <div class="row">
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>
        <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div>  
    </div>
</div>

另外，使用 margin或类似的 CSS 属性来添加空格，而不是 <br />标签。

jsFiddle Demo

关于html - Bootstrap 表单列未与非表单列对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36896216/

html - Bootstrap 表单列未与非表单列对齐？

上一篇：html - 如何使图片中间和链接在同一行？

下一篇：html - 如何让图像填满整个容器？