Управление выравниванием input-group-btn - PullRequest
0 голосов
/ 03 декабря 2018

Я пытаюсь поставить в одну строку имя, фамилию и кнопку ввода.
Общая ширина вышеуказанных 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">

1 Ответ

0 голосов
/ 03 декабря 2018

Bootstrap 4 - это не то же самое, что Bootstrap 3. Большинство классов были переименованы, и в отличие от начальной загрузки 3, Bootstrap 4 использует flex box.

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

Bootstrap 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

...