bootstrap align select с кнопкой и двумя полями ввода

У меня есть эта форма бутстрапа HTML.bootstrap align select с кнопкой и двумя полями ввода

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <form method="POST" action="reportGenerator.php" class="form-inline"> 
 
     <div class="input-group"> 
 
     <input type="text" id="From" class="form-control" name="From" placeholder="Date From"> 
 
     <input type="text" id="To" class="form-control" name="To" placeholder="Date To"> 
 
     <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown"> 
 
      <OPTION>Sale</OPTION> 
 
      <OPTION>Purchase</OPTION> 
 
     </select> 
 
     <span class="input-group-btn"> 
 
      <input class="btn btn-default" type="submit" value="Generate Report" /> 
 
     </span> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

Выход немного странно, у меня есть это как

Но то, что я пытаюсь сделать, это установить их все в одну строку в точку. Существуют ли классы начальной загрузки, которые могут это сделать?

источник

2016-11-25 TOMP

бутстрапом документация очень хорошо: http://getbootstrap.com/css/#forms-inline – Turnip

Вы найдете [это ](час ttp: //www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns) полезно –

Просто используйте этот код вместо кода .. В загрузчике есть класс называется Col-LG-н, цв-й мкр-н .. это будет делить экран в некоторой колонке п .max п значение 12 .. ниже код

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" > 
<div class="container"> 
    <div class="row"> 
     <form method="POST" action="reportGenerator.php" class="form-inline"> 
      <div class="input-group"> 
       <div class="col-lg-3 col-md-3"> 
        <input type="text" id="From" class="form-control" name="From" placeholder="Date From"> 
       </div> 
       <div class="col-lg-3 col-md-3"> 
        <input type="text" id="To" class="form-control" name="To" placeholder="Date To"> 
       </div> 
       <div class="col-lg-3 col-md-3"> 
        <select name="Target" class="form-control" type="button" id="Target" data-toggle="dropdown"> 
         <OPTION>Sale</OPTION> 
         <OPTION>Purchase</OPTION> 
        </select> 
       </div> 

       <div class="col-lg-3 col-md-3"> 
        <span class="input-group-btn"> 
         <input class="btn btn-default" type="submit" value="Generate Report" /> 
        </span> 
       </div> 

      </div> 
     </form> 
    </div> 
</div>

источник

2016-11-26 06:13:56

Если вы используете ноутбук, вам следует рассмотреть вопрос о добавлении col-md-[enter number from 1 to 12] к вашим формам. Code

<html lang="en"> 
 
    <head> 
 
     <title>Test</title> 
 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
        <form method="POST" action="reportGenerator.php" class="form-inline"> 
 
         <div class="input-group"> 
 
          <div class="row"> 
 
           <div class="col-md-3"> 
 
            <input type="text" id="From" class="form-control" name="From" placeholder="Date From"> 
 
           </div> 
 
           <div class="col-md-3"> 
 
           <input type="text" id="To" class="form-control" name="To" placeholder="Date To"> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <select name="Target"  class="form-control" type="button" id="Target" data-toggle="dropdown"> 
 
             <OPTION>Sale</OPTION> 
 
             <OPTION>Purchase</OPTION> 
 
            </select> 
 
           </div> 
 
           <div class="col-md-3"> 
 
            <span class="input-group-btn"> 
 
            <input class="btn btn-default" type="submit" value="Generate Report" 
 
            </select> 
 
           </div> 
 
          </div> 
 
          </span> 
 
         </div> 
 
        </form> 
 
       </div> 
 
      </div> 
 
    </body> 
 
</html>

источник

2016-11-25 14:19:12

Есть ли какие-либо классы Bootstrap, которые могут сделать это?

Не определенно и определенно не с классом входных групп/кнопок, поскольку они поддерживают только один вход.

Вы можете использовать столбцы и удалять прокладку, применяемую к ним, чтобы каждая кнопка ввода/могла находиться в одной строке без пробелов между ними. Подавляющее большинство CSS является косметическим (без функции), чтобы показать единый набор элементов управления. Они могут быть скорректированы, но, по-видимому, вы считаете нужным.

** Пример позволяет столбцам свернуть @ 767px для улучшения использования в мобильных устройствах. Если это нежелательно, вы можете легко изменить настройку столбца на все, что имеет смысл.

Рабочий пример:Использование вида FullPage.

.form { 
 
    margin: 20px; 
 
} 
 
.no-gutter > [class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.form .form-control.new-form-control, 
 
.form button { 
 
    border-radius: 0; 
 
} 
 
.form .form-control.new-form-control:focus { 
 
    border-color: #66afe9; 
 
    outline: 0; 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) 
 
} 
 
@media (min-width: 768px) { 
 
    .form .form-control.new-form-control { 
 
    border-right: 1px solid transparent; 
 
    } 
 
    .form button { 
 
    height: 34px; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .form .form-control.new-form-control { 
 
    border-bottom: 1px solid transparent; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 

 
    <form class="form"> 
 
    <div class="row no-gutter"> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <input type="text" id="From" class="form-control new-form-control" name="From" placeholder="Date From"> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <input type="text" id="To" class="form-control new-form-control" name="To" placeholder="Date To"> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <select id="Target" class="form-control new-form-control" name="Target"> 
 
      <option value="">Select 1 Option</option> 
 
      <option value="Sale">Sale</option> 
 
      <option value="Purchase">Purchase</option> 
 
     </select> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-3"> 
 
     <button type="submit" class="btn btn-default btn-block"> 
 
      Generate Report 
 
     </button> 
 
     </div> 
 

 
    </div> 
 
    </form> 
 

 
</div>

источник

2016-11-26 05:51:28 vanburen

bootstrap align select с кнопкой и двумя полями ввода

ответ

Смежные вопросы