別のボタンでインラインブロックを設定すると、ブートストラップ入力フィールドが縮む

Question

入力フィールドから「ファイルを選択」入力を表示したいだけですが、動作させることができませんでした。

は、私が今持っていることは次のとおりです。

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

これは私に次のような結果が得られます。

入力がこれよりも3倍大きくなるはずです。入力が正しいサイズである。この場合

が、「ファイルを選択」：

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

そして、これは私に次の結果を持っている：

は、その後、私はこのアプローチを試してみましたそれがどこにあるのか分からない。

私はこの仕事を手助けできますか？ divが<div class="row">

Answer 1

である

psが入力グループhttps://getbootstrap.com/docs/4.0/components/を試してみてください入力グループhttps://getbootstrap.com/docs/4.0/components/input-group

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