14

Bootstrapには、フォームの種類の例がたくさんあります。こんな感じの「横型」に興味があります

Picture.png

これは、Webインスペクターツールバーでいくつかの要素の概要を示した後の外観です。

写真2.png

私はポップアップモーダルの内部で作業していますが、スペースはすでに少しタイトです。ブートストラップのグリッドシステム.span1と.span2ラベルをクラスとして追加しようとしましたが、目的の動作が得られません。

ブートストラップの他の側面を使用して、目的の動作を実現する方法はありますか（つまり、水平フォームのラベルが占めるスペースの量を増やす）？これを行うための適切な方法は何ですか？ブートストラップバージョンを使用しています2.1

4

2 に答える 2

12

ブートストラップに何かが定義されているかどうかはわかりません。以下は回避策です。

<div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>

style="width:auto"どちらがデフォルト140pxでstyle="margin-left:auto"どれがデフォルトかを追加しました160px。またclass="input-small"、入力フィールドの幅を狭くして、モーダルに収まるように、より多くのスペースを絞り出します。

今、あなたはあなたのニーズに従ってそれに合うようにさらに微調整します。

于 2012-09-15T02:03:48.343 に答える
4

垂直方向の間隔を狭くform-control-smするには、フォントサイズを縮小します（Bootstrap 4を使用）。

<form>
  <div class="form-group form-row">
    <label class="col-sm-2 col-form-label form-control-sm">Label</label>
    <div class="col-sm-3">
      <input class="form-control form-control-sm">
    </div>
  </div>
</form>
于 2018-06-26T18:22:45.223 に答える