Bootstrap グリッドシステムの間隔調整について

前提・実現したいこと

Webシステムの画面で1つのタイトル・4つのラジオボタンを横並びで表示したい
Bootstrap v3.3.7
ブラウザ :IE11

発生している問題・エラーメッセージ

タイトルと１つ目のラジオボタンが重なってしまう
現在、Bootstrapのグリッドシステムにてレイアウトを組んでおり、何か他に手法があればご教授お願いします。
webデザインが初めてなので大変苦戦しております。

該当のソースコード

html
1  <!-- row -->
2                <div class="row" style="height:40px">
3                    <div class="indicator-container col-lg-5" style="border-style:solid;border:1px solid black">
4                        <div class="col-lg-3" style="align-items">タイトル</div>
5                        <div class="no-padding col-lg-9 col-lg-pull-2">
6                            <div class="radio">
7                                <label>
8                                    <input type="radio" name="optionsRadios" value="status" checked>
9                                    ラジオボタン１
10                                </label>
11                                <label>
12                                    <input type="radio" name="optionsRadios" value="connection">
13                                    ラジオボタン２
14                                </label>
15                                <label>
16                                    <input type="radio" name="optionsRadios" value="sequence">
17                                    ラジオボタン３
18                                </label>
19                                <label>
20                                    <input type="radio" name="optionsRadios" value="chart">
21                                    ラジオボタン４
22                                </label>
23                            </div>
24                        </div>
25                    </div>
26                </div>

試したこと

カラムの数を調整したんですが、どうしても重なってしまいます。paddingなどを入れる方法を検索してみたのですが、見つからず、、、です。

m.ts10806

2018/05/18 02:21

CSSフレームワークでインラインstyleは色々と問題がでるのであまりよくありません。せめて別でCLASS使うか、できればCSSフレームワークの機能を利用してください。またBootstrapのバージョンは何でしょうか？互換性のある機能、ない機能などあると思うので、環境情報として現象が確認されたブラウザと共に追記してください。

sanezane

2018/05/18 03:01

引き継いだものがほとんどインラインstyleでしたのでそのままの書き方をしていました。勉強になります。

sanezane

2018/05/18 03:03

本文編集しましたが、ブートストラップのバージョンが3.3.7でブラウザがIEになります。

m.ts10806

2018/05/18 03:54

イメージを図示ってできますか？また、現在の作りが大きく変わっても表現ができれば問題ないのでしょうか？

sanezane

2018/05/18 04:13

本文にイメージ添付しました。横並びであることと、ラジオボタンを切り替えると裏に隠れている画面が前に出る仕様なのでそれが実現できれば問題ないです！

m.ts10806

2018/05/18 04:17

裏に隠れている画面が前に出る・・？ちょっとよく分からないです。

sanezane

2018/05/18 04:23

すみません。ラジオボタンの切替で画面も切り替わるという意味です。なので、要素の出し分けができれば特に問題はありません。という意味です。

sanezane

2018/05/18 04:26

イメージがわかりにくかったので変更しました

行動規範の内容に同意します

回答2件

ベストアンサー

少し無理やり感ありますが、こういうときはドキュメントを読み直して1から組み直したほうが早いです。
form-groupとかinput-groupのラベル的な位置づけにした方がキレイにレイアウトできそうに思います。

※ボーダーとかは必要であれば別途つけてみてください。

html
1
2    <div class="container-fluid">
3        <div class="row">
4            <div class="col-lg-12">
5                <div class="form-group navbar-form">
6                    <label class="control-label">タイトル</label>
7                    <label class="radio-inline">
8                        <input type="radio" name="optionsRadios" value="status" checked>
9                        ラジオボタン１
10                    </label>
11                    <label class="radio-inline">
12                        <input type="radio" name="optionsRadios" value="connection">
13                        ラジオボタン２
14                    </label>
15                    <label class="radio-inline">
16                        <input type="radio" name="optionsRadios" value="sequence">
17                        ラジオボタン３
18                    </label>
19                    <label class="radio-inline">
20                        <input type="radio" name="optionsRadios" value="chart">
21                        ラジオボタン４
22                    </label>
23                </div>
24            </div>
25        </div>
26    </div>
27