引导程序4

Question

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

您可以在此处找到代码

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

Answer 1

引导程序4与引导程序3不同。大多数类已重命名，并且与引导程序3不同，引导程序4使用flex框。

引导程序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

控制对齐输入组-btn

1 个答案:

引导程序4

引导程序3