twitter-bootstrap-3 - 控制对齐 input-group-btn

Question

我正在尝试将名字、姓氏输入和按钮放在同一行。
上述 3 的总宽度，应该等于 'xxxxxxx' 输入。

你可以在这里找到代码

http://jsfiddle.net/zxb53wjq/1/

<div class="container">  


  <form role="form" action="" method="post">   
    <div class="row setup-content" id="step-2">
      <div class="col-xs-6 col-md-offset-3">
        <div class="col-md-12">

          <div class="form-group">

            <input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
          </div>
          <div class="form-group">
            <label class="control-label">Application:</label>                         
               <div class="input-group">                              
                 <input style="width:50% " class="form-control " placeholder="first name"  name="firstname" type="text" />
                 <input style="width:50% " class="form-control " placeholder="last name"  name="lastname" type="text" />
               </div>
               <span class="input-group-btn">                       
                          <button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
                       </span>
             </div>                                                                                                                                             
        </div>
      </div>
    </div>

  </form>

</div>

使用引导 css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

标签： twitter-bootstrap-3bootstrap-4

Answer 1

Bootstrap 4 与 bootstrap 3 不同。大多数类都已重命名，并且与 bootstrap 3 不同，bootstrap 4 使用flexbox。

引导程序 4

• 删除两个输入的内联样式

• 使用input-group-append而不是input-group-btn.

     <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <input  class="form-control " placeholder="last name"  name="lastname" type="text" />
  
        <div class="input-group-append">
          <button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
        </div>
      </div>
  

http://jsfiddle.net/fhg3qx96/

引导程序 3

• input-group-btn在里面使用input-group

      <div class="input-group mb-3">
        <input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
        <input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
        <span class="input-group-btn">
          <button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
        </span>
      </div>
  

https://codepen.io/anon/pen/dQrJeW