引导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列布局

回答

相关问题