1

Bootstrap 3 を使用して、ジャンボトロンの 1 行で複数の入力を取得するにはどうすればよいですか。

[テキスト入力] [送信ボタン]で [ドロップダウン リスト]を検索します。

これは私が現在持っているものです: 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 に答える