html - bootstrap 4 和 input-group-prepend 全宽输入

Question

我有以下代码:

<div class="col-md-8 content-row-top-spacer">
  <div class="input-group">
     <div class="input-group-prepend"><span class="input-group-text">Name</span></div>
     <%= f.text_field :name, placeholder: 'Campaign Name', class: 'w-100' %>
  </div>
    <div id="campaign_name_error" class="errors_container"></div>
</div>

我希望我的输入跨越 100% 的容器，并在输入中正确添加前缀，就像在 boostrap 演示中一样。

但是，我使用这段代码得到了以下结果:

我该如何解决这个问题？

Answer 1

您可以使用名为form-control 的类根据输入字段的父级来拉伸(stretch)输入字段的大小。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<h2>Eample 1</h2>
<p>with col-md-8</p>
<div class="container">
  <div class="col-md-8 content-row-top-spacer">
  <div class="input-group">
     <div class="input-group-prepend"><span class="input-group-text">Name</span></div>
    <input type="text" placeholder ='Capaign Name' class='form-control'>

  </div>
    <div id="campaign_name_error" class="errors_container"></div>
</div>
</div>

<h2>Eample 2</h2>
<p>with col-md-12</p>
<div class="container">
  <div class="col-md-12 content-row-top-spacer">
  <div class="input-group">
     <div class="input-group-prepend"><span class="input-group-text">Name</span></div>
    <input type="text" placeholder ='Capaign Name' class='form-control'>

  </div>
    <div id="campaign_name_error" class="errors_container"></div>
</div>
</div>
<br/>
<p>Both Example are different, if you will try to look these in medium screen</p>