Twitter bootstrap 引导2列布局_Twitter Bootstrap_Twitter Bootstrap 3

Twitter bootstrap 引导2列布局

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 引导2列布局,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,各位好, 我在这里寻求帮助。我被要求做上面的设计，我有问题，因为我无法正确创建2列目前我正在做以下工作： <div class="col-lg-12"> <hr> <div class="col-md-7"> <div class="blogHead"> <h2>The Cycle to Work Scheme information</h2>

各位好,

我在这里寻求帮助。我被要求做上面的设计，我有问题，因为我无法正确创建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>



工作周期计划信息
一些文字。按了解更多信息

我可以在这里得到一些指导吗，请不要张贴代码。我寻求的是指导，而不是解决方案：）


你左边的内容
右侧表单


你左边的内容
右侧表单

你的问题非常基本，你可以通过大量的例子在官方网站上找到你需要的一切。


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

想象一个有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=“row”使内容在两者之间水平对齐

希望这能有所帮助。可能值得回顾一下引导过程。

想象一个有12列的表。这就是Bootstrap使用的逻辑

您需要的代码是：

<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=“row”使内容在两者之间水平对齐

希望这能有所帮助。可能值得查看引导程序。

首先，您对列使用了pull-error:。其次，他所追求的简单布局真的没有必要。第三，我不认为将md9和3 div放在md12 div中有什么意义。虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，而这些人可能不知道您的代码建议的原因。首先，您对列使用了pull-error:。其次，他所追求的简单布局真的没有必要。第三，我不认为将md9和3 div放在md12 div中有什么意义。虽然这个代码片段可以解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来为读者回答这个问题，而这些人可能不知道您代码建议的原因。您的答案非常基本，可能会变成评论而不是答案。当然，但我需要50的声誉才能评论最初的问题。；）不管你的名声如何，发布一个应该是评论的答案通常都是离题的，不被允许的。请看你的答案，你的答案非常基本，可以用评论代替答案。当然，但我需要50的声誉才能评论最初的问题。；）不管你的名声如何，发布一个应该是评论的答案通常都是离题的，不被允许的。请看这是否回答了您的问题请将其标记为答案和/或向上投票：）很高兴我能帮忙如果这回答了您的问题请将其标记为答案和/或向上投票：）很高兴我能帮忙