Re: 外部フォームのデザインが崩れてしまいます

2020年6月7日 at 1:59

ソースコードと画像を見る限り、bootstrapのクラス名の問題のようです。

bootstrapは1つの横枠を12に分けるようになっているので、
col-sm-4と書かれている部分を4と8にするか、
そのクラスをそもそも設定しないかで改善されると思います。
1つの横枠→ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

もし、タブレット以上でラベルと入力を横並びにしたければ、
ラベルのクラスcol-sm-4、入力のクラスcol-sm-8とすれば、足して12なので横1列に収まります。
※3と9などでもOKです。

単純にラベルと入力を上下に順々に配置していくならば、
col-sm〜のクラスは不要です。

下記を参考にしてみてください。
http://bootstrap3.cyberlab.info/css/forms-basic.html
http://bootstrap3.cyberlab.info/css/forms-horizontal.html

タグ:

Re: 外部フォームのデザインが崩れてしまいます

2020年6月8日 at 11:00
DeaconBluesさま

ありがとうございました。
<div> コンテンツ配置時のクラス名を取り外しましたところ、縦並びで
表示することができました。

bootstrapの勉強不足を痛感いたしました。
本当にありがとうございました。これからも引き続き勉強を続けて
まいります。