1

如何使用 Bootstrap 3 在 jumbotron 的单行上获得多个输入。

所以它看起来像这样：在 [文本输入] [提交按钮]中查找 [下拉列表]

这就是我目前得到的：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>

4

2 回答 2

7

像这样试试

<!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>

截屏

于 2013-09-29T06:21:15.750 回答
4

尝试这个

<!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-16T06:02:59.870 回答