Несколько входов на одной линии Bootstrap 3

Как я могу получить несколько входов на одной линии в JumboTron с Bootstrap 3.Несколько входов на одной линии Bootstrap 3

Так это выглядит примерно так: Найти [выпадающий список] в [ввода текста] [Submit Button]

Это то, что я в настоящее время есть: http://jsfiddle.net/cTLwW/ но идет на 4 линии, и каждый для ввода элемента является способ широко.

<div class="container jumbotron"> 
<h1><span class="text-center">Mywebsite.</span></h1> 

<h2><span class="text-center">Find things close to you</span></h2> 

<form class="form-horizontal" role="form" action="/" method="post"> 
    <div class="form-group"> 
    <span class="text-center"><label for="inputCity" class="col-lg-2 control-label">I 
    need</label></span> 

    <div class="col-lg-10"> 
     <span class="text-center"><select class="form-control"> 
     <option> 
      Bakery 
     </option> 

     <option> 
      Supermarket 
     </option> 

     <option> 
      Etc 
     </option> 
     </select></span> 
    </div> 
    </div> 

    <div class="row form-group"> 
    <span class="text-center"><label for="inputType" class= 
    "col-lg-2 control-label">In</label></span> 

    <div class="col-lg-8"> 
     <span class="text-center"><input type="text" class="form-control" id= 
     "inputCity" placeholder="City"> <button type="submit" class= 
     "btn btn-success"><span class="text-center">Go</span></button></span> 
    </div> 
    </div> 
</form>

источник

2013-09-29 nathan

Попробуйте, как это,

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <style> 
     label { 
     font-weight: normal; 
     } 
     .jumbotron { 
     line-height: 1.143; 
     } 
     label.col-lg-1 { 
     width: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container jumbotron"> 
    <h1><span class="text-center">Mywebsite.</span></h1> 

    <h2><span class="text-center">Find things close to you</span></h2> 

    <form class="form-horizontal" role="form"> 
     <div class="form-group"> 
     <label for="inputCity" class="col-lg-2 control-label">Ineed</label> 
     <div class="col-lg-3"> 
      <select class="form-control"> 
       <option> 
        Bakery 
       </option> 

       <option> 
        Supermarket 
       </option> 

       <option> 
        Etc 
       </option> 
       </select> 
     </div> 
     <label for="inputType" class="col-lg-1 control-label">In</label> 
     <div class="col-lg-3"> 
      <input type="text" class="form-control" id="inputCity" placeholder="City"> 
     </div> 
     <button type="submit" class="btn btn-success">Go</button> 
     </div> 
    </form> 
    </div> 



    <script src="//code.jquery.com/jquery.js"></script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
    </body> 
</html>

Screen-shot

источник

2013-09-29 06:21:15 devo

Это не совсем сработало. Все ярлыки находятся на отдельных строках, а кнопка, выпадающее меню и текстовое поле также не совпадают. Вот скриншот [ссылка] http://imgur.com/LZim7FG – nathan

@nathan Проверьте обновленный ответ. – devo

Проверить http://imgur.com/ilKUR2e – devo

Попробуйте

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Bootstrap</title>   
     <link href="css/bootstrap.min.css" rel="stylesheet">   
    </head> 
    <body> 
    <div class="container jumbotron"> 
    <h1><span class="text-center">Mywebsite.</span></h1> 
    <h2><span class="text-center">Find things close to you</span></h2> 

    <form class="form-horizontal" role="form"> 
     <div class="form-group"> 
     <label for="inputCity" class="col-lg-2 control-label">Ineed</label> 
     <div class="col-lg-3"> 
      <select class="form-control"> 
       <option>Bakery</option> 
       </select> 
     </div> 
     <label for="inputType" class="col-lg-1 control-label">In</label> 
     <div class="col-lg-3"> 
      <input type="text" class="form-control" id="inputCity" placeholder="City"> 
     </div> 
     <button type="submit" class="btn btn-success">Go</button> 
     </div> 
    </form> 
    </div> 
    <script src="js/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

источник

2014-01-16 06:02:59 Vikram

Несколько входов на одной линии Bootstrap 3

ответ

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