web-dev-qa-db-ja.com

Twitter Bootstrap=インラインフォームの間隔

これは、動作中のコードを示すJSFiddleです。

Twitter Bootstrap 3を使用して、応答性を考慮してフォームのさまざまな部分の間に数ピクセルの間隔を追加します。ドキュメントを確認しましたが、それでもこれを達成するための最良の方法が何であるかは私には明らかではありません。

何か案は？

現在のフォームHTMLは次のとおりです。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="timezone">Timezone</label>
    <select class="form-control" id="timezone" name="timezone">
      <option value="America/St_Lucia">America/St_Lucia</option>
      <option value="Europe/Nicosia">Europe/Nicosia</option>
    </select>
  </div>

  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>

  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>

  <button class="btn" type="submit">Save</button>
</form>
htmlcsshtml5twitter-bootstrapresponsive-design
28
Peter Sampras

.form-inlineのすべての直接の子に対してmarginを試すことができます：

.form-inline > * {
   margin:5px 3px;
}

このフィドルを表示http://jsfiddle.net/MFKBj/10/

PD：!importantをフィドルに追加するだけで、これが必要ないbootstrap CSSを超えていることを確認できます。

38
DaniP

Bootstrap Gridシステム。さまざまなビューポートを処理するクラスの束を適用できます。

<form class="form-inline" role="form">
  <div class="form-group row">
    <div class="col-md-6">
      <label class="sr-only" for="timezone">Timezone</label>
      <select class="form-control" id="timezone" name="timezone">
        <option value="America/St_Lucia">America/St_Lucia</option>
        <option value="Europe/Nicosia">Europe/Nicosia</option>
      </select>
    </div>
    <div class="col-md-3"">
      <label class="radio-inline">
        <input id="timeformat-0" name="timeformat" value="24" type="radio" />
        19:00
      </label>
    </div>
    <div class="col-md-3">
      <label class="radio-inline">
        <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
        7:00 PM
      </label>
    </div>
    <button class="btn" type="submit">Save</button>
  </div>
</form>
6
meavo

私はOPと同じ質問を持っていました-彼は物事を水平方向に間隔をあけることについて尋ねています-BSは物事をかなりうまく一緒に粉砕します ここに見られるように 。私のソリューションは次のとおりです。

.form-inline label {
    margin-left: 5px;
}
3
Scott

Bootstrap 4に Spacingユーティリティ があります。

<div class="row">
    <div class="col-sm-6 mb-lg-2">
        <!-- column-small-50%, margin-bottom-large -->
    </div>
</div>
1
kR105

Bootstrap 3では、要素をdiv.form-group、 そのようです：

<div class="form-group">
  <label class="radio-inline">
    <input id="timeformat-0" name="timeformat" value="24" type="radio" />
    19:00
  </label>
</div>

<div class="form-group">
  <label class="radio-inline">
    <input checked id="timeformat-1" name="timeformat" value="12" type="radio" />
    7:00 PM
  </label>
</div>

これはBootstrap 3ドキュメントのこのセクションで見ることができます：

https://getbootstrap.com/docs/3.3/css/#forms-inline

1
Richard Jones

これが私がそれをやった方法です。すべてのラベルとコントロールに最小限のスペースを追加し、コンテナに負のマージンを使用して、すべてを正しく整列させます。

.form-inline {
    margin: 0 -3px;
}

.form-inline .form-group label,
.form-inline .form-group input,
.form-inline .form-group select {
    margin: 0 3px;
}
0
Matthew Hudson