目次
- 1. 分割
- 1.1. 2分割(1:1)
- 1.2. 2分割(6:4)
- 1.3. 2分割(6:4)
- 1.4. 3分割(1:1:1)
分割
2分割(1:1)
(1)「[Toggle Editor]」をクリックし、下記のコードをコピー貼り付けします。
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
</div>
(2)必要箇所を適宜変更していきます。
※変更する箇所がわかりやすいように、文字色を赤にしました。
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
</div>
(3)「[Toggle Editor]」をクリックし、いつもの表示に切り替えます。
(4)「ここに内容を入れて下さい。」をドラッグで範囲指定して、挿入したい内容を入れて下さい。
画像を挿入したい場合は、範囲指定をしたまま、上部の画像挿入ボタンをクリックして画像を挿入して下さい。
※上に入力されたほうが、表示の際には左側に表示されます。
(5)保存ボタンをクリックして、ページを確認してください。
2分割(6:4)
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
</div>
2分割(6:4)
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
<div class="col-md-8 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
</div>
3分割(1:1:1)
3分割のときには下記コードをコピーして使用して下さい。
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
ここに内容を入れて下さい。
</div>
</div>
コメント