在單行多個輸入引導3

我怎樣才能獲得在一行多個輸入的超大屏幕與引導3.在單行多個輸入引導3

因此，它看起來是這樣的：找到[下拉列表]在[文本輸入] [提交按鈕]

這就是我目前有：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

在單行多個輸入引導3

回答

相關問題