Question

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

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

这就像这样呈现

但是我需要像这样呈现它

我如何实现这一目标？

Answer 1

尝试使用 bootrap类表单控件

->add('skills', EntityType::class, array(
                    'class' => ProfileSkills::class,
                    'query_builder' => function (EntityRepository $er) {
                        return $er->createQueryBuilder('s')
                            ->orderBy('s.id', 'ASC');
                    },
                    'choice_label' => 'name',
                    'label' => 'Research keywords',
                    'attr' => array(
                        'placeholder' => 'Please add your research keywords one by one.',
                    )
                ))

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

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

2 个答案: