1

フレックスボックスでBootstrap 4 CSS を使用していますが、ネストされたグリッドに問題があります。ネストされたグリッドは、フレックスボックスのない Bootstrap 4 で期待どおりに機能しますが、フレックスボックスが使用されると、要素が水平に配置される代わりに積み重ねられます。このコード:

<main class="container-fluid">
    <form novalidate>
        <div class="row">
            <div class="col-md-6 col-xs-12">
                <fieldset class="form-group">
                    <label>Single input</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">1</span>
                        <input type="text" class="form-control" placeholder="100%">
                    </div>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12">
                <fieldset class="form-group row">
                    <div class="col-md-6">
                        <label>Double Input 1</label>
                        <input type="text" class="form-control" placeholder="50%">
                    </div>
                    <div class="col-md-6">
                        <label>Double Input 2</label>
                        <input type="text" class="form-control" placeholder="50%">
                    </div>
                </fieldset>
            </div>
        </div>
    </form>
</main>

このビューを作成します。

編集: 奇妙なことに、2 列目のフィールドセットを div に変更すると、レイアウトは期待どおりに機能します。ただし、要素の計算された高さ以外に、フィールドセットと div の間に意味のある css の違いは見つかりませんでした。レイアウトを壊すのはフィールドセットについて何ですか??

残念ながら、cdn 経由で利用できる Bootstrap 4 css のバージョンはフレックスボックスが有効になっていないため、jsfiddle を作成できません。

4

1 に答える 1

0

あなたの内側の次.rowは<fieldset>タグにあります。

TWBS フィールド セットでは、マージンが 0 に設定され、行クラスは左/右が -15px に設定されます。使用している組み合わせによってレイアウトが崩れ、列が折り返されます。

このように、個別にネストしてみてください.row <div>。

<!-- does not work -->
<fieldset class="form-group row">
  ...
</fieldset>


<!-- better solution -->
<div class="row">
  <fieldset class="form-group">
    ..
  </fieldset>
</div>
于 2016-07-03T00:22:08.340 に答える