Bootstrap форматирования встроенный в один ряд

решаемая: JSfiddle вот что я хотел, образец:Bootstrap форматирования встроенный в один ряд

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label for="name" class="col-xs-2 control-label">Name</label> 
    <div class="col-xs-4"> 
     <input type="text" class="form-control col-sm-10" name="name" placeholder="name" /> 
    </div> 
    </div> 

    <div class="form-group"> 
    <label for="birthday" class="col-xs-2 control-label">Birthday</label> 
    <div class="col-xs-10"> 
     <div class="form-inline"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="year" /> 
     </div> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="month" /> 
     </div> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="day" /> 
     </div> 
     <div class="form-group"> 
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 

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

    <div class="form-group"> 
    <label for="name" class="col-xs-2 control-label">Name</label> 
    <div class="col-xs-4"> 
     <input type="text" class="form-control col-sm-10" name="name" placeholder="name" /> 
    </div> 
    </div> 

</form>

.css:

.form-inline .form-group { 
    margin-left: 0; 
    margin-right: 0; 
}

END

UPDATE:

I посмотрите, где моя проблема, но у меня есть form-horizontal, что я хочу, и я изменение фи его form-inline все остальное смешалось, пожалуйста, посмотрите на обновленный jsfiddle

Как это сделать встроенный в один ряд без промежутков, как показано на скриншоте:

<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1"> 
    <div class="form-group col-md-12"> 
    <label class="col-sm-3 control-label">Location</label> 
    <div class="col-md-3"> 
     <input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text"> 
    </div> 
    <div class="col-md-3"> 
     <input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text"> 
    </div> 
    <div class="col-md-3"> 
     <input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text"> 
    </div> 
    <div class="col-md-2"> 
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
    </div> 
    </div> 
</form>

, как вы можете см расстояние между входом:

JSFiddle

источник

2016-02-17 Nick Kahn

Использование form-inline вместо form-horizontal:

<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1"> 
    <div class="form-group"> 
    <label class="control-label">Location</label> 
    <input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text"> 
    </div> 
    <div class="form-group"> 
    <input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text"> 
    </div> 
    <div class="form-group"> 
    <input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text"> 
    </div> 
    <div class="form-group"> 
    <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
    </div> 
</div>

bootply

источник

2016-02-17 18:13:39 nthall

1+ Спасибо @nthall Я вижу, где моя проблема, но у меня есть 'form-horizontal', который я хочу, и если я изменю его на' form-inline', все остальное перепутано, посмотрите на обновленный jsfiddle https://jsfiddle.net/abuhamzah/7whzzhyh/1/ –

Эта скрипка демонстрирует совсем другой вопрос/проблему, чем код в вашем вопросе здесь. – nthall

неважно, я могу решить –

Простой расчет: col-sm-3 * 4 + col-sm-2 == col-sm-14 WHI ch не хорошо. Вы должны убедиться, что общая сумма не будет превышать cols для каждой строки.

Предложение - изменить первый col-sm-3 к col-sm-1

источник

2016-02-17 18:13:29

я попытался быть в пределах 12, но до сих пор не работает –

Хорошо, так что взгляните на @nthall ответ. –

Bootstrap форматирования встроенный в один ряд

ответ

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