ブートストラップ

みなさん、こんにちは2列のレイアウト、

私はここにいくつかの助けを探しています。 2つの列を正しく作成できないため、上記の設計を依頼して問題が発生しています。

現在、私は次のことをやっている：

<div class="col-lg-12"> 
    <hr> 
    <div class="col-md-7"> 
     <div class="blogHead"> 
      <h2>The Cycle to Work Scheme information</h2> 
     </div> 
     <div class="blogBody"> 
      <p>Some text.</p><a class="btn lightBlueSolid">Press For More Information</a> 
     </div> 
    </div><!---- I repeat this div a few times --> 
    <div class="col-md-5"><img alt="" class="img-responsive img-thumbnail pad-20" src="images/insentives/bike.jpg"></div> 
</div>

私はここにいくつかのガイダンスを取得してもらえ、コードを投稿しないでください。私は

出典

2017-06-20 PoppaFluff

12列の表を想像してみてください。それはブートストラップが使用するロジックです。

あなたはあなたがどんな割合を望んでいるかを決めなければなりません。コンテンツの左側と右側に8/12の列が必要で、右側に4/12の列が残ります（言い換えれば、コンテンツのメインチャンクはページの最初の75％を水平方向に占めています）。

あなたが必要であろうコード：各々において

<html> 
    <head> 
     <!-- All the stuff here to link to Bootstrap --> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="col-sm-8"> 
       <!-- CONTENT HERE --> 
      </div> 
      <div class="col-sm-4"> 
       <!-- SIDEBAR CONTENT HERE --> 
      </div> 
     </div> 
    </body> 
</html>

あなたは、あなたがそれを必要とする場合、2つの間に水平に整列含量を有するようにDIV ID =「行」を使用することができDIV。

うまくいけば助けてください。ブートストラップdocumentationを検討する価値があります。

出典

2017-06-20 15:40:31 lukecolli98

ありがとうございました:)私は正直に脳のおならを持っていました:) – PoppaFluff

これがあなたの質問に答えるなら、答えとしてマークしてください。 – lukecolli98

<html> 
<div class="col-md-12"> 
<div class=col-md-9 pull-left> 
your left side content 
</div> 
<div class =col-md-3> 
right side form 
</div> 
</div> 
</html>

出典

2017-06-20 12:47:07 Rahul

まず、カラムには間違ったプルを使用しました：http://getbootstrap.com/css/#grid-column-ordering。第二に、彼が行っているシンプルなレイアウトで本当に必要はありません。第三に、md 9 divとmd 12 divの内側にmd 9と3 divを置くという点は見当たりません。 – MattD

このコードスニペットは問題を解決するかもしれませんが、[説明を含む]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）は本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。 – DimaSan

あなたの質問は非常に基本的なものです:)ないソリューション、指導を求めると、あなたは多くの例で公式documentationに必要なすべてを見つけるでしょう。

出典

2017-06-20 12:49:15 Antikhippe

あなたの答えは非常に基本的なもので、回答ではなくコメントになっている可能性があります。 – GrumpyCrouton

最初の質問にコメントするには50の評判が必要です。 ;） – Antikhippe

あなたの評判にかかわらず、コメントでなければならない答えを投稿するのは、一般的には話題にはならず、ぶち壊されます。 [何をすべきか]を見てください（https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead ） – GrumpyCrouton

<div class="container"> 
     <div class="row"> 
      <div class="col-md-7"> 
      <!--This one here is the left part of the page, and it contains 
      as many rows as you want, rows defines your Blocks --> 

       <div class="row"> 

       </div> 

       <div class="row"> 

       </div> 

       <div class="row"> 

       </div> 
      </div> 
      <div class="col-md-3 col-md-offset-2"> 
      <!-- here is the Right part of your page, costumize it as you 
      wish --> 
      </div> 
     </div> 
    </div>

出典

2017-06-20 13:01:40

ブートストラップ

答えて

関連する問題