bootstrapでの要素の横並びについて

Question

bootstarapを用いた要素の横並びについて

こんにちは！初めて質問させていただきます。
よろしくお願いいたします。

現在、私はYouTubeの動画を見ながら模写コーティングを行っています。

模写の中で、bootstrapで画像と文章の二つの要素をそれぞれcol-6に設定して要素を横並びにしたいのですが、縦並びになってしまいます。
何度手本のコードを見返しても同じに見えるのですが、どこが問題かご指摘いただけると
幸いです。

<div class="container-fluid padding">
<div class="row padding">
		<div class="col-lg-6">
			 <h2>If you build it...</h2>
			 <p>東京に住んでいる23歳さすがに転職したくて震える</p>
			 <p>販売職続けていても未来はないと思い、一念発起努力を続けていくんやで。はあ、今日も勉強頑張ろう</p>
             <br>
			 <a href="#" class="btn btn-primary">learn more</a>
		</div>
		<div class="col-lg-6"><img src="img/desk.png" class="img-fluid">
		</div>
</div>
</div>

また、画像と文章をCSSでdislay:flexとしてみたのですが、そうすると横並びにはなるのですが、そうするとページの縮小に対応せず、横並びのままになってしまい、うまくいきませんでした。

Answer 1

row クラスと padding クラスの間に BackSpace が入っており、正常に横並びを行なうためのスタイルが適用されていないことが原因です。BackSpace を削除することで、質問者さんの実現したいことが行えると思います(動作確認用リンク)。

<div class="container-fluid padding">
  <div class="row padding">
    <div class="col-lg-6">
      <h2>If you build it...</h2>
      <p>東京に住んでいる23歳さすがに転職したくて震える</p>
      <p>販売職続けていても未来はないと思い、一念発起努力を続けていくんやで。はあ、今日も勉強頑張ろう</p>
      <br>
      <a href="#" class="btn btn-primary">learn more</a>
    </div>
    <div class="col-lg-6"><img src="img/desk.png" class="img-fluid">
    </div>
  </div>
</div>

Comments

[dai0927]

ありがとうございます！
横並びなりました！