web-dev-qa-db-ja.com

form-inlineの入力幅bootstrap 3

わからない、Bootstrap 3？）

<header>
    <div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search"> 
                  </div>
                    <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/'+document.getElementById('search').value">
            </form>
        </div>
    </div>
</header>

一部のスタイル（ピクセル単位の幅など）なしで実行できますか？

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
11
Konstantin Rusanov

更新（W3Schoolsリンクが追加されました）：この問題について非常に良い回答があることを発見しました： w3schools.com/bootstrap/ bootstrap_forms_sizing.asp 。どちらかを適用する方法の良い例があります.input-lgおよび.input-sm入力高さまたは.col-lg-*および.col-sm-入力幅。

元の答え：Bootstrap Grids with your form and col- xs- ..モバイルデバイスにスタックする必要がある各入力フィールドのクラス以下のコードのようなもの（Bootstrapから貼り付けたコピー）：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

これらのcol-xs- ..クラスをフォームに適用し、モバイルデバイスに列を積み上げました（ブラウザウィンドウを小さくするとうまくいきました）。

<div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                <div class="col-xs-12 col-md-2"> 
                    <div class="form-group">  
                        <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">  
                    </div>
                </div>
                    <div class="col-xs-6 col-md-1">
                        <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/>
                </div>
            </form>
        </div>
    </div>

デスクトップデバイスでは、これらのフィールドにより小さい値（col-md-2およびcol-md-1）を指定しましたが、これらの値を好きなように微調整したい場合があります。

更新：入力要素にLESS変数を使用してカスタムの色とサイズを作成することを考えましたか、Bootstrap "カスタム変数をカスタマイズして、カスタムCSSスタイルシート内の色、サイズなどを定義します。"

Customize をチェックすると、Bootstrapサイトの一部です。フォームの入力要素をカスタマイズできます。以下のようなLESS変数：@ input-bg、@ input-color、@ input-height-base、@ input-borderなどは、あなたのケースで役に立ちます。たとえば、@ input-height-baseはデフォルトで。form-control高さです。

4
jyrkim

試す

.form-inline .form-group input {
    width:140px;
}

CSSからManipuへ

2
Samuel Moshie