引导程序4和输入组前缀全角输入

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 的类根据输入字段的父级来扩展输入字段的大小。

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

Answer 2

您也可以使用CSS

.input-group{
display : inline-block
}

和

<%= f.text_field :name, placeholder: 'Campaign Name', style: 'width:100%;' %>