引導網格對齊

有人可以檢查我的代碼，並告訴我，爲什麼<br>標籤後不<textarea>標籤工作<br>以及爲什麼日期後場搞砸了？引導網格對齊

<html> 
    <head> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $('#dateRangePicker').datepicker({ 
        format: 'dd/mm/yyyy', 
       }).on('changeDate', function(e){ 
        $('#dateRangeForm').formValidation('revalidateField', 'date'); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <h1 align="center">Some text here</h1> 
     <div class="form-group"> 
      <div class="col-sm-3"> 
       <label>Full Name:</label> 
      </div> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" id="usr" style="width:400px;"/> 
      </div><br><br> 
      <div class="col-sm-3"> 
       <label>Father's Name:</label> 
      </div> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" id="usr" style="width:400px;"/> 
      </div><br><br> 
      <div class="col-sm-3"> 
       <label>Permanent Residential Address:</label> 
      </div> 
      <div class="col-sm-9"> 
       <textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea> 
      </div><br><br> 
      <div class="col-sm-3"> 
       <label>Address for Communication:</label> 
     </div> 
     <div class="col-sm-9"> 
      <textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea> 
     </div><br><br> 
     <div class="col-sm-3"> 
      <label>Date:</label> 
     </div> 

     <div class="col-sm-3 input-group input-append date" id="dateRangePicker"> 
      <input type="text" class="form-control" name="date" style="width:400px;"/> 
      <span class="input-group-addon add-on"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
     </div><br><br> 
     <div class="col-sm-3"> 
      <label>Age as on Date:</label> 
     </div> 
     <div class="col-sm-9"> 
      <input type="text" class="form-control" id="usr" style="width:400px;"/> 
     </div><br><br> 
     <div class="col-sm-3"> 
      <label>Caste:</label> 
     </div> 
     <div class="col-sm-9"> 
      <label>SC</label> 
      <input type="radio"/>&nbsp&nbsp&nbsp 
      <label>ST</label> 
      <input type="radio"/>&nbsp&nbsp&nbsp 
      <label>OBC</label> 
      <input type="radio"/>&nbsp&nbsp&nbsp 
      <label>GENERAL</label> 
      <input type="radio"/> 
     </div><br><br> 
    </body> 
</html>

來源

2016-02-06 Aniruddha Raje

看着代碼，它好像你有什麼不明白的

<br>

標籤的用途，但這裏說明http://www.w3schools.com/tags/tag_br.asp它插入一個換行符。希望有所幫助！

來源

2016-02-06 20:19:42

原諒我陳述我的問題的方式，請嘗試運行代碼並檢查輸出，您會明白我的問題更好。 :) –

我明白了！文本字段之間沒有空格。您是否嘗試使用CSS放入邊距，而不是嘗試在HTML中完成所有操作？這可能會更好，更一致！ –

是的！「margin-bottom」做了textarea標籤之間垂直間距的竅門，Date列正在麻煩，無法準確找到它沒有對齊的原因。 –

如果你想添加一個元素下面的間距（在這種情況下），你應該真的使用CSS。它給了你更多的控制，你可以更確定不同的瀏覽器有相同的結果。

看到，因爲你已經在使用本文檔中內嵌樣式，你可以說

 <div class="col-sm-9" style="margin-bottom: 20px;">

一般內嵌樣式是不是一個好主意，這樣做 - 你應該有它在一個單獨的文件，使用類和ID的，但我想你知道:)

來源

2016-02-06 20:29:01

謝謝！ margin-bottom做了兩個textareas之間的間隔的技巧，Data域中的任何內容都沒有正確對齊？ –

那麼，你可以隨時用CSS來「修復」它，就像我剛纔告訴你的一樣。我不知道爲什麼bootstrap不是對齊的，因爲它應該。 –

你可以像這樣「修復」它:(請注意，這是一個可怕的黑客，這應該是一個例外，不是一個規則，因爲你做:) '

' –

在你的代碼中需要很少的修改。

問題

<br>標籤插入換行符這增加了元件之間的額外的空間。
Date字段由於錯誤地使用input-group類而變得不對齊。
沒有分號（;）&nbsp後。正確的語法是

解決方案

您可以通過包裝內form-group
要對齊日期每一個元素消除<br>標籤的需要，創建一個類的子容器input-group。不需要
 。這不是編寫HTML的標準方式。改爲使用margin。

修改了上面的修復代碼。檢查here

來源

2016-02-06 20:29:01 Samir

嘿！謝謝，一切都看起來是正確的方式，直到Date標籤和它的文本框，我試圖像上面那樣實現for-group，但是，它們在Date標籤和它的文本框之後都沒有對齊，對於麻煩抱歉：「（ –

<html> 
    <head> 
     <title></title> 
       <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

      <!-- jQuery library --> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

      <!-- Latest compiled JavaScript --> 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

      <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script> 


     <script> 
      $(document).ready(function() 
      { 
       $('#dateRangePicker') 
        .datepicker(
        { 
         format: 'dd/mm/yyyy', 
        }) 
        .on('changeDate', function(e) 
        { 

         $('#dateRangeForm').formValidation('revalidateField', 'date'); 
        }); 
      }); 

     </script> 

    </head> 

    <body> 
     <h1 align="center">Some text here</h1> 

     <div class="form-group"> 
      <div class="col-sm-3"> 
      <label>Full Name:</label> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-9"> 
      <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-3"> 
      <label>Father's Name:</label> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-9"> 
      <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;" /> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-3"> 
      <label>Permanent Residential Address:</label> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-9"> 
      <textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-3"> 
      <label>Address for Communication:</label> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-sm-9"> 
      <textarea class="form-control" rows="5" id="comment" style="width:400px; margin-bottom: 10px;"></textarea> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-sm-3"> 
      <label>Date:</label> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-sm-3"> 
      <div class="input-group input-append date" id="dateRangePicker"> 
       <input type="text" class="form-control" name="date" style="width:400px; margin-bottom: 10px;" /> 
       <span class="input-group-addon add-on"> 
       <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
      </div> 
     </div> 
       Things messed up from here ------> 

      <div class="form-group"> 
       <div class="col-sm-3"> 
         <label>Age as on Date:</label> 
       </div> 
      </div> 

     <div class="form-group"> 
       <div class="col-sm-9"> 
        <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/> 
       </div> 
     </div> 

       <div class="form-group"> 
       <div class="col-sm-3"> 
         <label>Caste:</label> 
       </div> 
     </div> 
    <div class="form-group"> 
     <div class="col-sm-9"> 
      <label>SC</label> 
      <input type="radio"/>&nbsp&nbsp&nbsp 

      <label>ST</label> 
      <input type="radio"/>&nbsp&nbsp&nbsp 

      <label>OBC</label> 
      <input type="radio"/>&nbsp&nbsp&nbsp 

      <label>GENERAL</label> 
      <input type="radio"/> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-sm-3"> 
       <label>Educational Qualification:</label> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-sm-9"> 
      <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-sm-3"> 
      <label>Sports Event/Game:</label> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-sm-9"> 
      <select class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"> 
       <option>Inspector of Income Tax</option> 
       <option>Tax Assistant</option> 
       <option>Stenographer-Gr. II</option> 
       <option>Multitasking Staff</option> 
      </select> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-sm-3"> 
       <label>Details of Best Performance:</label> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-sm-9"> 
      <input type="text" class="form-control" id="usr" style="width:400px; margin-bottom: 10px;"/> 
     </div> 
    </div> 

    </body> 

</html>

來源

2016-02-07 06:29:17

引導網格對齊

回答

相關問題