2017-06-20 6 views
0

bootstrap 2 column layout引導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> 

我能請在這裏得到一些指導,請不要張貼代碼。我尋求指導,而不是解決方案:)

回答

0

想象一下有12列的表格。這是Bootstrap使用的邏輯。

所以你必須決定你想要的比例。我想說,你需要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> 

在每個div都那麼你可以使用DIV ID =「行」有,如果你需要的是兩者之間的水平排列的內容。

希望有幫助。這可能值得回顧Bootstrap documentation

+0

謝謝:)我老實說有一個腦屁:) :) – PoppaFluff

+0

如果這回答你的問題,請將它標記爲答案和/或upvote它:)很高興我能幫助 – lukecolli98

0
<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> 
+0

首先,您對列使用了拉錯:http://getbootstrap.com/css/#grid-column-ordering。其次,他只需要簡單的佈局就不需要它了。第三,我不認爲把md 9和3 div放入md 12 div的意義重大。 – MattD

+3

雖然此代碼段可能會解決問題,但[包括解釋](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers)確實有助於提高帖子的質量。請記住,您將來會爲讀者回答問題,而這些人可能不知道您的代碼建議的原因。 – DimaSan

2

你提的問題是非常基本的,你會發現所有你需要在官方documentation有很多的例子。

+2

你的答案是非常基本的,可以作爲評論而不是答案。 – GrumpyCrouton

+0

當然,但我需要聲望50以評論最初的問題。 ;) – Antikhippe

+1

這是一般偏離主題,不願意發表一個應該是評論的答案,不管你的聲望如何。請看看[你應該做什麼](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-c​​an-i-do-instead ) – GrumpyCrouton

0
<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>