Bootstrap4でformをcol-md6で横並びにしたい

Question

Bootstrap4でformをcol-md6で横並びにしたいです。
どなたかご教授お願いします。

やりたいことはformをcol-md6で50%:50%の横並びレイアウトにしたいです。
jQuery validationの関係でformタグを使用する必要があります。

<!-- formがあるとスタイルが適用され失敗 -->
<div class="row">
    <form id="form0">
        <div class="col-md6">
            <div class="form-horizontal">
                <!-- フォーム左エリア -->
            </div>
        </div>
        <div class="col-md6">
            <div class="form-horizontal">
                <!-- フォーム右エリア -->
            </div>
        </div>
    </form>
</div>

<!-- formがないとスタイルが適用されないのでうまくいく ​-->
<div class="row">
    <div class="col-md6">
       ​ <!-- 左エリア -->
    </div>
    ​<div class="col-md6">
        ​<!-- 右エリア -->
    </div>
</div>

Answer 1

formをもっと外に追いやれば良いのでは

Comments

[退会済みユーザー]

コメントありがとうございます。
その方法を試しましたが、レイアウトは同じままでした。

[m.ts10806]

具体的なコード全体を提示してください。
row、もしくはcontainerよりも外に出してしまえば理論上はformにはリセットCSSだけしかあたってないはずなのでレイアウトへの影響は皆無であるはずです。

[退会済みユーザー]

教えて頂いた方法で再現ができました。ありがとうございます。
たしかに、formがdiv rowの内側だとcssが適用され失敗します。ほかにうまくいかなかったのは他の原因が考えられました。

```html
<!-- ok -->
<div id="app">
<form id="form0">
<div class="row">
@* column1 start *@
<div class="col-md-6">

</div>
@* column1 end *@

@* column2 start *@
<div class="col-md-6">

</div>
@* column2 end *@

</div>
</form>
</div>

<!-- ng -->
<div id="app">
<div class="row">
<form id="form0">
@* column1 start *@
<div class="col-md-6">

</div>
@* column1 end *@

@* column2 start *@
<div class="col-md-6">

</div>
@* column2 end *@

</form>
</div>
</div>
```

[m.ts10806]

はい。なので「もっと外に」と回答しました。

Answer 2

Bootstrap4でformをcol-md6で横並びにする具体的な方法

<div id="app">
    <form id="form0">
        <div class="row">
            @* column1 start *@
            <div class="col-md-6">
                a
            </div>
            @* column1 end *@

            @* column2 start *@
            <div class="col-md-6">
                b
            </div>
            @* column2 end *@

        </div>
    </form>
</div>