14

最初のレベルに水平レイアウトのフォームが必要ですが、1行内に、垂直（デフォルト）レイアウトのフォーム「インライン」を作成できます。これを達成する簡単な方法はありますか？

注： .form-inline入力の上に内側のラベルが表示されないため、私が探していることは実行されません。

これまでのところ、私はこのようなものを持っています：

<div class="form-horizontal">
    <div class="control-group">
        <label class="control-label">
           outer label
        </label>
        <div class="controls ### SOMETHING TO CLEAR/OVERRIDE form-horizontal ###">
            ### INLINE FORM WITH SAME STRUCTURE IS HERE ###
        </div>
    </div>
</div>
4

4 に答える 4

8

Boostrapはデフォルトではこれを行うことができませんが、これをフォークに含めましたhttps://github.com/jasny/bootstrap/blob/master/less/jasny-forms.less#L40

ブートストラップhttp://jasny.github.com/bootstrapにJasnyの拡張機能を使用することを検討してください

またはこのCSSを使用する

.form-vertical .form-horizontal .control-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .control-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
}
.form-horizontal .form-vertical .controls {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.control-group .control-group {
  margin-bottom: 0;
}

HTMLで

<form class="form-horizonal">
    # Horizal controls here

    <div class="form-vertical">
        <div class="control-group">
            <label class="control-label">Label</label>
            <div class="controls">Something here</div>
        </div>
    </div>
</form>
于 2012-12-10T14:27:55.597 に答える
0

これが、Boostrap3用に更新された@jasny-arnold-danielsCSSです。3では、 form-groupがcontrol-groupを置き換え、form-controlがcontrolを置き換えます。@user9645の幅への変更も必要です。新しいCSSは次のとおりです。

.form-vertical .form-horizontal .form-group > label {
  text-align: left;
}
.form-horizontal .form-vertical .form-group > label {
  float: none;
  padding-top: 0;
  text-align: left;
  width: 100%
}
.form-horizontal .form-vertical .form-control {
  margin-left: 0;
}
.form-horizontal .form-vertical.form-actions,
.form-horizontal .form-vertical .form-actions {
  padding-left: 20px;
}
.form-group .form-group {
  margin-bottom: 0;
}
于 2015-09-02T00:01:40.677 に答える
0

Bootstrap 3のカスタムCSSを作成する必要はありません。form -horizo​​ntalのクラスをformタグに配置する代わりに、水平にしたい（そして列サイズをサポートする）フォーム要素の周りにそのクラスのラッパーdivを配置するだけです。水平アイテムのクラス）。

たとえば、これは機能します。

<form>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">I'm a horizontal form element</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>

  <div class="form-group">
    <label>I'm a vertical form element</label>
    <input type="text" class="form-control">
  </div>
</form>

これが機能するのは、クラスが明示的に指定されていないフォームに対して垂直フォームが自動的に使用されるためです。その「クラスの欠如」は、ここのドキュメントで見ることができます。

于 2016-01-03T21:58:17.530 に答える
-2

私はあなたが何を探しているのか正確にはわかりませんでしたが、推測しようとしました。

2本の垂直線でフォームを作成しました。2本目の線は複数のフォーム要素で作成しました。

これを行うためにインラインブロックを使用しました。

http://jsbin.com/icoduh/1/edit

于 2012-12-10T14:37:53.733 に答える