Question

Hello everyone,

I am looking for some assistance here. I have been requested to make the design above and am having issues with it as I am unable to create the 2 columns correctly.

Currently I am doing the following:

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

Could I please get some guidance here, please do not post code. I seek guidance, not a solution :)

Answer 1

您的问题非常基础，您可以在官方documentation找到您需要的所有内容。

Answer 2

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

Answer 3

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

Answer 4

想象一下有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 =＆＃34; row＆＃34;如果需要，可以在两者之间水平对齐内容。

希望这会有所帮助。可能值得回顾一下Bootstrap documentation。

bootstrap 2 column layout

4 个答案: