小编Ano*_*sta的帖子

在Bootstrap中为span div添加边框会混淆布局

我从Twitter Bootstrap开始,并对如何在其中进行布局功能提出疑问.这是HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Test</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script  src="http://code.jquery.com/jquery-latest.js"></script>
        <script  src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="span4">a</div>
                <div class="span8">b</div>
            </div>
            <div class="row">
                <div class="span12">c</div>
            </div>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

style.css中:

div.container
{
    background-color:#aaa;
}
div.span4, div.span8, div.span12
{
    background-color:#eee;
    border: 1px solid #888;
    border-radius:3px;
}

Run Code Online (Sandbox Code Playgroud)

为span4和span8添加边框会增加它们的宽度,我最终会这样:

引导跨度布局