2017-11-12 4 views
0

私はHTML5テンプレートを修正しようとしています。ブートストラップ・パラメータのデフォルト設定は以下の通りであった。HTML5レイアウトDIVサイジング

  • COL-SM-12 COL-MD-4 COL-LG-4
  • COL-SM-12 COL-MD-8 COL-LG-8

これは、ラテン文字が画面幅の20%を占め、写真が80%を占めることを意味しましたが、私はそれを逆にしたいと思います...テキストは80%幅、写真20%を占めます。

誰かが、ブートストラップのパラメータが作業に応答するために必要なものについてアドバイスできますか?私はオプションの負荷を試したが、それを正しく得ることはできません!

これは可能ですか、それともCSSを改訂する必要がありますか?

おかげ

以下

全コード:

<section id="ourteam" class="wow fadeInUp"> 
<div class="container"> 
    <div class="row"> 
    <div class="col-sm-12 col-md-4 col-lg-4"> 
     <h2>Meet our Team</h2> 
     <div class="ourteamd"> 
     <p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p> 
     </div> 
    </div> 
    <div class="col-sm-12 col-md-8 col-lg-8"> 
     <div class="responsive"> 
     <div> 
      <div class="third-effect"> 
      <img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team"> 
      <div class="mask"> 
       <a href="#">Facebook</a> 
       <a href="#" class="twitter">Twitter</a> 
      </div> 
      </div> 
+1

あなただけの列内のコンテンツを切り替える必要があります。 – Aibrean

答えて

1

はわずか4が8となり、両方の列のサイズ値を切り替え、および8は、コードの下で試してみてください。4.

0

になります。

<div class="row"> 
<div class="col-sm-12 col-md-8 col-lg-8"> 
    <h2>Meet our Team</h2> 
    <div class="ourteamd"> 
    <p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p> 
    </div> 
</div> 
<div class="col-sm-12 col-md-4 col-lg-4"> 
    <div class="responsive"> 
     <div class="third-effect"> 
      <img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team"> 
      <div class="mask"> 
       <a href="#">Facebook</a> 
       <a href="#" class="twitter">Twitter</a> 
      </div>   
     </div> 
    </div> 
</div> 

関連する問題