文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将“标签3”设置为与此表格中的“标签1”相同的百分比？

问如何将“标签3”设置为与此表格中的“标签1”相同的百分比？
EN

Stack Overflow用户

提问于 2019-09-11 17:33:08

回答 1查看 45关注 0票数 0

我使用的是Bootstrap 4。

我想将“标签3”设置为与“标签1”相同的宽度。输入宽度，页面的其余部分(参见代码)

有可能吗？

谢谢。

<div class="form-row">
<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 1:</label>
<div class="input-group col-6">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>

<div class="col-6">
<div class="form-group row">
<label for="name" class="col-6">LABEL 2:</label>
<div class="col-6">
<input class="form-control" placeholder="Enter text" type="text">
</div>
</div>
</div>
</div>      

<div class="form-row">
<div class="col-12">
<div class="form-group row">
<label for="name" class="col-3">LABEL 3:</label>
<div class="input-group col-9">
<input type="text" class="form-control" placeholder="Enter text">
</div>
</div>
</div>

bootstrap-4

css

forms

twitter-bootstrap

回答 1

Stack Overflow用户

发布于 2019-09-11 17:43:40

不是将row放在form-group旁边，而是添加另一个具有form-row的div，如下所示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-row">
  <div class="col-6">
    <div class="form-group">
      <div class="form-row">
        <label for="name" class="col-6">LABEL 1:</label>
        <div class="input-group col-6">
          <input type="text" class="form-control" placeholder="Enter text">
        </div>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="form-group">
      <div class="form-row">
        <label for="name" class="col-6">LABEL 2:</label>
        <div class="col-6">
          <input class="form-control" placeholder="Enter text" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="form-row">
  <div class="col-12">
    <div class="form-group">
      <div class="form-row">
        <label for="name" class="col-3">LABEL 3:</label>
        <div class="input-group col-9">
          <input type="text" class="form-control" placeholder="Enter text">
        </div>
      </div>
    </div>
  </div>
</div>

我认为问题主要是row的填充，但不确定。我只是通过分离row/form-row正确地重新排列了它

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57886134

复制

相似问题

问如何将“标签3”设置为与此表格中的“标签1”相同的百分比？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将“标签3”设置为与此表格中的“标签1”相同的百分比？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将“标签3”设置为与此表格中的“标签1”相同的百分比？
EN