相同的引導列對齊/格式不同

我試過在這個網站上找到的一個答案，即將行放入一行內，但它不起作用。相同的引導列對齊/格式不同

我遇到的問題是，當代碼是相同的，列對齊不同。在中型或大型屏幕上，第二列的標籤似乎拉到左側。標籤和字段之間的空間不同，表單組之間的間隔也是關閉的。在xs屏幕上，第二列中的字段寬度較短。

代碼粘貼在下面。我試圖讓對齊方式與它在第一列中的顯示方式相同。

<html> 
<head> 

    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title> </title> 

    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="css/font-awesome.min.css" rel="stylesheet"> 
    <link href="css/bootstrap-social.css" rel="stylesheet"> 
    <link href="css/styles.css" rel="stylesheet"> 

</head> 
<body> 

<div class="container-fluid"> 

<div class="row box"> 

<div class="col-xs-12 col-md-6"> 
<div class="row"> 

<form class="form-horizontal" method="POST" role="form">  

    <div class="form-group">    
    <label for="claimant1" class="col-sm-3 control-label">Claimant 1</label> 
    <div class="col-sm-9"> 
    <input type="text" class="form-control" id="claimant1" name="claimant1" placeholder="Enter 1st Claimant"> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label for="gender" class="col-sm-3 control-label">Gender</label> 
    <div class="col-sm-9"> 
     <label class="radio-inline"><input type="radio" name="gender" value="Male">Male</label> 
     <label class="radio-inline"><input type="radio" name="gender" value="Female">Female</label>   
    </div> 
    </div> 

    <div class="form-group">    
    <label for="age1" class="col-sm-3 control-label">DOB</label> 
    <div class="col-sm-9"> 
    <input type="date" class="form-control" id="age1" name="age1" placeholder=""> 
    </div> 
    </div> 

    </div> <!-- /row -->  
</div> <!-- /column --> 

<div class="col-xs-12 col-md-6" >   
    <div class="row"> 

    <div class="form-group">    
    <label for="claimant2" class="col-sm-3 control-label">Claimant 2</label> 
    <div class="col-sm-9"> 
    <input type="text" class="form-control" id="claimant2" name="claimant2" placeholder="Enter 2nd Claimant"> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label for="gender2" class="col-sm-3 control-label">Gender</label> 
    <div class="col-sm-9"> 
     <label class="radio-inline"><input type="radio" name="gender2" value="Male">Male</label> 
     <label class="radio-inline"><input type="radio" name="gender2" value="Female">Female</label>   
    </div> 
    </div> 

    <div class="form-group">    
    <label for="age2" class="col-sm-3 control-label">DOB</label> 
    <div class="col-sm-9"> 
    <input type="date" class="form-control" id="age2" name="age2" placeholder=""> 
    </div> 
    </div>   

    </div> <!-- /row --> 
</div> <!-- /column --> 

</div> <!--/row box --> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 


</body> 
</html>

來源

2016-03-14 Roberto

你錯過了形式的標籤，這是你更新的代碼

<html> 

    <head> 

    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title> </title> 

    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="css/font-awesome.min.css" rel="stylesheet"> 
    <link href="css/bootstrap-social.css" rel="stylesheet"> 
    <link href="css/styles.css" rel="stylesheet"> 

    </head> 

    <body> 

    <div class="container-fluid"> 

     <div class="row box"> 

     <div class="col-xs-12 col-md-6"> 
      <div class="row"> 

      <form class="form-horizontal" method="POST" role="form"> 

       <div class="form-group"> 
       <label for="claimant1" class="col-sm-3 control-label">Claimant 1</label> 
       <div class="col-sm-9"> 
        <input type="text" class="form-control" id="claimant1" name="claimant1" placeholder="Enter 1st Claimant"> 
       </div> 
       </div> 

       <div class="form-group"> 
       <label for="gender" class="col-sm-3 control-label">Gender</label> 
       <div class="col-sm-9"> 
        <label class="radio-inline"> 
        <input type="radio" name="gender" value="Male">Male</label> 
        <label class="radio-inline"> 
        <input type="radio" name="gender" value="Female">Female</label> 
       </div> 
       </div> 

       <div class="form-group"> 
       <label for="age1" class="col-sm-3 control-label">DOB</label> 
       <div class="col-sm-9"> 
        <input type="date" class="form-control" id="age1" name="age1" placeholder=""> 
       </div> 
       </div> 
      </form> 
      </div> 
      <!-- /row --> 
     </div> 
     <!-- /column --> 

     <div class="col-xs-12 col-md-6"> 
      <div class="row"> 
      <form class="form-horizontal" method="POST" role="form"> 

       <div class="form-group"> 
       <label for="claimant2" class="col-sm-3 control-label">Claimant 2</label> 
       <div class="col-sm-9"> 
        <input type="text" class="form-control" id="claimant2" name="claimant2" placeholder="Enter 2nd Claimant"> 
       </div> 
       </div> 

       <div class="form-group"> 
       <label for="gender2" class="col-sm-3 control-label">Gender</label> 
       <div class="col-sm-9"> 
        <label class="radio-inline"> 
        <input type="radio" name="gender2" value="Male">Male</label> 
        <label class="radio-inline"> 
        <input type="radio" name="gender2" value="Female">Female</label> 
       </div> 
       </div> 

       <div class="form-group"> 
       <label for="age2" class="col-sm-3 control-label">DOB</label> 
       <div class="col-sm-9"> 
        <input type="date" class="form-control" id="age2" name="age2" placeholder=""> 
       </div> 
       </div> 
      </form> 
      </div> 
      <!-- /row --> 
     </div> 
     <!-- /column --> 

     </div> 
     <!--/row box --> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 


    </body> 

</html>

來源

2016-03-14 07:22:29

謝謝，是的，我錯過了我的貼碼閉幕表單標籤。但是，在我的實際項目中，每行有2行總共2列。即使關閉窗體標籤，我仍然遇到了錯誤的對齊方式。然後我意識到，也許一個表單類不能跨越多行。我將表單類壓縮到一行，現在它正確對齊。 – Roberto

仍然不會得到你的問題lol：p –

相同的引導列對齊/格式不同

回答

相關問題