如何將Html與可用區域的邊緣對齊/錨定？

我有一個造型問題，我希望我的表單元素在使用引導網格系統時佔用可用的大小。在這裏如何將Html與可用區域的邊緣對齊/錨定？

<div> 
<h1>Data Entry Form</h1> 
<div class="row form">   
    <div class="col-sm-8"> 
     <div class="row"> 
      <div class="form-group col-sm-6"> 
       <label for="Callsign">Callsign: VH-</label> 
       <input name="Callsign" /> 
      </div> 
      <div class="form-group col-sm-6"> 
       <label for="acType">Type:</label> 
       <input name="acType" /> 
      </div>   
     </div> 
     <div class="row"> 
      <div class="form-group col-sm-2"> 
       <label for="Description">Description:</label> 
      </div> 
      <div class="form-group col-sm-10"> 
       <textarea name="Description"></textarea> 
      </div>     
     </div> 
    </div> 
</div>

的代碼示例這是呈現這樣

但是我需要它呈現這樣

我怎樣才能做到這一點？

來源

2016-11-15 TheCount

嘗試bootrap類的形式控制

<html> 
 
<head> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
<div> 
 
<h1>Data Entry Form</h1> 
 
<div class="row form">   
 
<div class="col-xs-8"> 
 
    <div class="row"> 
 
     <div class="form-group col-xs-3"> 
 
      <label for="Callsign">Callsign: VH-</label> 
 
     </div> 
 
     <div class="form-group col-xs-4"> 
 
      <input class="form-control" name="Callsign" /> 
 
     </div> 
 
     <div class="form-group col-xs-1"> 
 
      <label for="acType">Type:</label> 
 
     </div> 
 
     <div class="form-group col-xs-4"> 
 
      <input class="form-control" name="acType" /> 
 
     </div>   
 
    </div> 
 
    <div class="row"> 
 
     <div class="form-group col-xs-4"> 
 
      <label for="Description">Description:</label> 
 
     </div> 
 
     <div class="form-group col-xs-8"> 
 
      <textarea class="form-control" name="Description"></textarea> 
 
     </div>     
 
    </div> 
 
</div> 
 
</div> 
 
</body>

來源

2016-11-15 10:06:44

-1

編輯：首先，你需要用100％的寬度樣式文本區域。有一個媒體查詢正在將文本區域更改爲新行。如果你不能刪除查詢您可以添加一個新的，以避免行爲：

textarea { 
    width: 100%; 
} 

@media (max-width: 769px) { 
    .col-sm-10 { 
    width: 83.33333333%; 
    float: left; 
    } 
    .col-sm-2 { 
    width: 16.66666667%; 
    float: left; 
    } 
    .col-sm-6 { 
    width: 50%; 
    float: left; 
    } 
}

textarea { 
 
    width: 100%; 
 
} 
 

 
@media (max-width: 769px) { 
 
    .col-sm-10 { 
 
    width: 83.33333333%; 
 
    float: left; 
 
    } 
 
    .col-sm-2 { 
 
    width: 16.66666667%; 
 
    float: left; 
 
    } 
 
    .col-sm-6 { 
 
    width: 50%; 
 
    float: left; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
    <h1>Data Entry Form</h1> 
 
    <div class="row form"> 
 
    <div class="col-sm-8"> 
 
     <div class="row"> 
 
     <div class="form-group col-sm-6"> 
 
      <label for="Callsign">Callsign: VH-</label> 
 
      <input name="Callsign" /> 
 
     </div> 
 
     <div class="form-group col-sm-6"> 
 
      <label for="acType">Type:</label> 
 
      <input name="acType" /> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="form-group col-sm-2"> 
 
      <label for="Description">Description:</label> 
 
     </div> 
 
     <div class="form-group col-sm-10"> 
 
      <textarea name="Description"></textarea> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2016-11-15 10:12:10 Alvaro

如何將Html與可用區域的邊緣對齊/錨定？

回答

相關問題