如何将 Html 与可用区域的边缘对齐/锚定？答案

【问题标题】：How do I align / anchor Html with the edges of available area?如何将 Html 与可用区域的边缘对齐/锚定？
【发布时间】：2016-11-15 20:29:25
【问题描述】：

我遇到了一些样式问题，因为我希望我的表单元素在使用引导网格系统时占据可用大小。在这里的代码示例中

<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>

这是这样渲染的

但是我需要它像这样呈现

我怎样才能做到这一点？

【问题讨论】：

标签： html css forms twitter-bootstrap

【解决方案1】：

尝试使用 bootrap Class form-control

<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>

【讨论】：

【解决方案2】：

已编辑：首先，您需要设置宽度为 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>

【讨论】：