表格對齊 - 字段相距太遠

我是新手引導，並從未與它合作（我知道它的傷心）我的表單輸入的空間太大檢查https://tadzik9634.000webhostapp.com/lest-sidebar.php 我找不到解決方案來對齊它們，所以空間會更小，這裏是我的html代碼。我的單選按鈕之間的空間也很大。表格對齊 - 字段相距太遠

<div class="container-form"> 
<form class="form-horizontal" action="" method="post"> 
<p><span class="error">* required field.</span></p> 
<div class="form-group"> 
<label for="first_name" class="col-sm-4 control-label">Name:</label> 
<div class="col-sm-4"> 
<input type="text" class="form-control input-sm" name="first_name"> 
<span class="error">* <?php echo $nameErr;?></span> 
</div> 
</div> 
<div class="form-group"> 
<label for="last_name" class="col-sm-4 control-label">SurnameName: </label> 
<div class="col-sm-4"> 
<input type="text" class="form-control input-sm" name="last_name"> 
<span class="error">* <?php echo $lastNameErr;?></span> 
</div> 
</div> 
<div class="form-group"> 
<label for="email" class="col-sm-4 control-label">Email: </label> 
<div class="col-sm-4"> 
<input type="text" class="form-control input-sm" name="email"> 
<span class="help-block">Please Enter Your Email</span> 
<span class="error">* <?php echo $emailErr;?></span> 
</div> 
</div> 
<label class="radio-inline"> 
<input type="radio" name="ironing" id="optionsRadios1" <?php if (isset($ironing) && $ironing=="Yes") echo "checked";?> value="Yes">Yes 
</label> 
<label class="radio-inline"> 
<input type="radio" name="ironing" id="optionsRadios2" 
<?php if (isset($ironing)&& $ironing=="No") echo "checked";?> value="No">No 
</label> 
<span class="help-block">Would Like Ironing?</span> 
<span class="error">* <?php echo $ironingErr;?></span> 
<div class="form-group"> 
<label for="Romms" class="col-sm-4 control-label" >Number Of Rooms: </label> 
<div class="col-sm-4">         
<input type="number" class="form-control input-sm" max="10" name="Rooms"> 
<span class="error">* <?php echo $RoomErr;?></span> 
</div> 
</div> 
<div class="form-group"> 
<label for="Hours" class="col-sm-4 control-label" > Number hours: </label> 
<div class="col-sm-4"> 
<input type="number" class="form-control input-sm" min="3" name="Hours"> 
<span class="error">* <?php echo $RoomErr;?></span> 
</div> 
</div> 
<div class="form-group">  
<label for="description">Description of the House: </label> 
<div class="col-sm-4"> 
    <textarea name="description" rows="3" class="form-control input-sm" cols="10"></textarea> 
<span class="error">* <?php echo $descriptionErr;?></span> 
</div> 
</div> 
<input class="btn btn-default"type="submit" name="submit" value="Submit"> 
</form> 
</div>

來源

2017-06-14 Wojtek T

我不會把表單字段（標籤和字段）是單獨的列，因爲你固有地獲得列間距。嘗試使用引導類form-inline來將您的元素相鄰放置。

<div class="form-inline"> 
    <div class="form-group"> 
     <label for="first_name">Name:</label> 
     <input type="text" class="form-control input-sm" name="first_name"> 
     <span class="error">* </span> 
    </div> 
</div>

文檔：http://getbootstrap.com/css/#forms-inline

來源

2017-06-14 10:20:26

也做到了，但我的單選按鈕仍然怪怪的任何suggostionsü檢查同一頁面的更新版本 –

@WojtekT這是一個在你的CSS中設置。看到我的答案。 –

@WojtekT您的單選按鈕的語法不正確。在標籤和兩個單選按鈕周圍都有一個「標籤」標籤。正確的語法記錄在這裏：http://getbootstrap.com/css/#checkboxes-and-radios –

HTML的結構是不正確的。將列中的引導列包裝在row類中，將form-group包裝在列中。事情是這樣的 -

<div class="row> 
    <div class="col-md-12"> 
     <div class="form-group> 
      <label></label> 
      <input type=""> 
      .... 
     </div> 
    </div 
</div>

來源

2017-06-14 10:23:02

您的文件「以免-的sidebar.php」 9號線

label{ 
    display: inline-block; 
    width: 210px; 
    text-align: right; 
}

的width導致您的單選按鈕空格相隔那麼遠的問題如下。

嘗試使用以下，而不是設置你的標籤寬度：

<div class="form-inline"> 
    <div class="form-group"> 

     <div class="col-md-4"> 
      <label for="first_name">Name:</label> 
     </div> 

     <div class="col-md-8"> 
      <input type="text" class="form-control input-sm" name="first_name"> 
      <span class="error">* </span> 
     </div> 

    </div> 
</div>

來源

2017-06-14 10:26:10

我試過這個，但現在場都結束了該地點 –

我得到了它的工作類型，現在我有nanother問題如何對齊fieldns和標籤左側？ –

你可以使用引導類.text-left或.pull-left –

表格對齊 - 字段相距太遠

回答

相關問題