Question

我在使附加组件具有相同宽度时遇到问题。我使用的是Font Awesome图标，并且前缀大小适合每个特定的图标。大约一年前，我发现了另一个线程来描述我的确切问题，但是没有答案。

Bootstrap4 make all input-group-addons same width

以下是我的问题的屏幕截图：https://imgur.com/7FIOCsi

我尝试过各种运气不好的CSS调整，包括上述线程中提供的调整。

相关HTML

<div class="row body-main-bg">
                <div class="col-sm-4 my-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-user"></span>
                            </span>                    
                        </div>
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                </div>
            </div>
            <div class="row body-main-bg">
                <div class="col-sm-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-envelope"></span>
                            </span>                    
                        </div>
                        <input type="text" class="form-control" placeholder="Email">
                    </div>
                </div>
            </div>
            <div class="row body-main-bg">
                <div class="col-sm-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-ellipsis-v"></span>
                            </span>                    
                        </div>
                        <input type="text" class="form-control" placeholder="Subject">
                    </div>
                </div>
            </div>
            <div class="row body-main-bg">
                <div class="col-sm-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-pencil"></span>
                            </span>                    
                        </div>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
                    </div>
                </div>
            </div>

Answer 1

我认为最简单的答案是CSS网格。

.wrapper
{
display:grid;
grid-template-rows: repeat(3,1fr) 2fr;
grid-template-columns: 15% 85%;
grid-row-gap:1rem
}

然后将图标分配给第一列，并输入第二列。

希望这可以回答您的问题。

Answer 2

我尝试了与您相同的代码段，仅作了一些CSS调整即可。我刚刚添加了以下CSS，请使用此CSS，这将解决您的前置/插件宽度问题。

.input-group-text {
    width: 40px;
}
.input-group-text span {
    margin: 0 auto;
}

这也是该摘录的网址， bootstrap-input-group-prepend-addon-width-issue

Answer 3

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="modal-body" id="m_cr_body">
  <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend w-25">
      <span class="input-group-text w-100" id="inputGroup-sizing-sm"><i class="fas fa-camera  fa-fw"></i> Photographer</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>
  <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend w-25">
      <span class="input-group-text w-100" id="inputGroup-sizing-sm"><i class="fas fa-paint-brush  fa-fw"></i> Edit</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>
  <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend w-25">
      <span class="input-group-text w-100" id="inputGroup-sizing-sm"><i class="fas fa-ruler-vertical  fa-fw"></i> Rule</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>
</div>
</div>

引导程序输入组前缀/附件宽度调整

3 个答案: