ブートストラップはイメージとテキストを中央に並べて配置しません

Question

イメージを右側に置き、左側のテキストを に入れようとしましたが、何らかの理由でそれとは逆の理由がわかりません。 どのように私はそれに合わせて縮小することができます "あなたはロゴの背後にあるシンプルさを見ることができますか？"サイズ。

Link to website

Answer 1

左にしたい列が最初に来る必要があります。したがって、この場合はテキストです。

例

<div class="row"> 
    <div class="col-xs-6"> 
     [text] 
    </div> 
    <div class="col-xs-6"> 
     [image] 
    </div> 
</div> 

それは、ビューポートのサイズに応じて調整されますので、あなたがロゴをIMG応答クラスを持っています。また、「高さ：200px」のインラインスタイルもあります。この数字を小さくすると、ロゴのサイズが小さくなります。

Answer 2

ブートストラップからのスタイルがレイアウトを設定しています。たとえば、画像<img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right">には浮動小数点があります。左はブートストラップからのものです。ブートストラップスタイルは、<img src="Isaac.png" alt="" id="img_q" class="col-xs-6 text-right" style="float: right;">のようにスタイルをインラインにするか、！important;スタイルの後に他のスタイルをオーバーライドします。ブラウザの開発者ツールを使用してCSSを分析すると、ページに何が影響しているのか、何が影響していないのかがわかります。