Bootstrap 3跨多行垂直對齊

我遇到需要跨多行垂直對齊項目。從Plunker可以看出，Font Awesome圖標並未與下面的所有複選框對齊。如何將圖標與複選框的行對齊？表格中有更多列被刪除以供發佈。在複選框上有保證金左側和保證金右側。Bootstrap 3跨多行垂直對齊

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 

    <title>F Trace</title> 

    <!-- Bootstrap core CSS --> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> 

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> 

    <!-- Custom styles for this template --> 
    <link href="style.css" rel="stylesheet"> 



    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 

     <section id='top5'> 
      <div class='container tables'> 
       <div class='row'> 
        <div class='col-md-12 settings'> 
         <table class="table text-center custom-table"> 
          <thead> 
           <tr> 
            <th width="12%"><div>Инженерные системы</div><div class='controls'><i class="fa fa-bolt"></i><i class="fa fa-tint"></i><i class="fa fa-lightbulb-o"></i><i class="fa fa-yelp"></i><i class="fa fa-sun-o"></i><i class="fa fa-cogs"></i></div></th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr> 
            <td class="vert-align checkboxes"><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input></td> 
           </tr> 
           <tr> 
            <td class="vert-align checkboxes"><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input></td> 
           </tr> 
           <tr> 
            <td class="vert-align checkboxes"><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input><input type='checkbox'></input></td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
     </section> 

    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> 
    </body> 
</html>

來源

2016-01-06 El Anonimo

你可以創建一個小提琴嗎？ –

我會將其他答案標記爲已接受的答案。我必須繼續編碼頁面的其餘部分，所以不能創建小提琴。謝謝。 –

嘗試使用相同尺寸的圖標。或者設置div.controls i {width: 10px;}

Plunker

來源

2016-01-06 16:17:13 Gabriel

現在看起來更好！謝謝。如果您不介意，請解釋一下{width：10px;}的變化？ –

它改變了嵌套在div類'控件'中的所有圖標的寬度。 –

@Münich。謝謝。 –

Bootstrap 3跨多行垂直對齊

回答

相關問題