引導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列的表格。這是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。

來源

2017-06-20 15:40:31 lukecolli98

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

如果這回答你的問題，請將它標記爲答案和/或upvote它:)很高興我能幫助 – 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和3 div放入md 12 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

引導2列布局

回答

相關問題