使用另一个按钮设置内联块时，引导输入字段会缩小

Question

我只是想显示一个＆＃34;选择文件＆＃34;从我的输入字段输入，但我无法使其正常工作。

我现在拥有的是：

<div class="col-md-12">
   <div class="d-inline-block">
      <input type="text" class="form-control" id="bookTitle" aria-describedby="" placeholder="Enter Author">
   </div>
   <div class="d-inline-block">
      <label class="btn btn-default">
      <i class="fa fa-upload" aria-hidden="true"></i>  Choose a file... <input type="file"  name="text_file" hidden>
      </label>
   </div>
   {{--<input type="file" class="btn"  name="text_file" />--}}
</div>

这给了我以下结果：

输入应该比这大三倍。

然后我尝试了这种方法：

<div class="d-inline-block col-md-10">
   <label for="exampleInputEmail1">Title</label>
   <input type="text" class="inline-block form-control" id="bookTitle" aria-describedby="" placeholder="Enter document title">
</div>
<div class="d-inline-block col-sm-20">
   <label class="btn btn-default inline-block">
   <i class="fa fa-upload" aria-hidden="true"></i>  Choose a file... <input type="file"     name="image" hidden>
   </label>
</div>

这有以下结果：

在这种情况下，输入是正确的大小，但是＆＃34;选择文件＆＃34;不是它应该在的地方。

有人可以帮我做这项工作吗？

p.s div位于<div class="row">

Answer 1

尝试输入组https://getbootstrap.com/docs/4.0/components/input-group

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-12">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
      <span class="input-group-btn">
        <label class="btn btn-default inline-block">
          <i class="fa fa-upload" aria-hidden="true"></i>  Choose a file... <input type="file"     name="image" hidden>
        </label>
      </span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;