Question

JSFiddle已关闭，所以我将在下面附加一小块原始HTML。它基本上是由黑色边框包围的少量内容。目前边界太宽。目前，在bootstrap.css中有一行被注释掉

width: 320px;

这是我想要的实际宽度，但是当我取消注释此行时内容完全取代。如何在保持正确布局的同时减小黑色边框的宽度？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="http://dl.dropbox.com/u/12337149/code/bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link href="http://dl.dropbox.com/u/12337149/code/bootstrap-responsive.css" rel="stylesheet">
</head>

<body>


<div class="container">
    <!-- Main hero unit for a primary marketing message or call to action -->
    <!-- <div class="span6">&nbsp;hlo world</div> -->
    <div id="main">
        <div class="row">

            <div class="span4 offset4">
                <p><a class="btn btn-primary btn-large">Roll The Dice &raquo;</a></p>

                <div class="alert alert-success">
                    <strong>Don</strong> wins!!
                </div>



            </div>

        </div>
        <div class="row">

            <div class="span2 offset4">
                <h2>Don's stats</h2>

                <ul>
                    <li>Rolls: 764</li>
                    <li>Wins: 322</li>
                    <li>%: 0.532</li>
                    <li>Profit: $5297</li>
                </ul>

            </div>

            <div class="span2">
                <h2>Ang's stats</h2>
                <ul>
                    <li>Rolls: 764</li>
                    <li>Wins: 322</li>
                    <li>%: 0.532</li>
                    <li>Profit: $5297</li>
                </ul>


            </div>

        </div>
    </div>
</div>


</body>
</html>

Answer 1

您无法更改#main宽度并保持spanX宽度不变。如果您希望整个页面的最大宽度为320px，那么您必须编辑span1,2,3等声明，使其比前一个大320/12（而不是现在的940px）。但是，如果你只想要你的边界区域是320px宽，那么你可以从#main元素中删除边框并将其放置到内部span4元素，就像这样（我已经用一个内联红色边框来描绘示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="http://dl.dropbox.com/u/12337149/code/bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link href="http://dl.dropbox.com/u/12337149/code/bootstrap-responsive.css" rel="stylesheet">
</head>

<body>


<div class="container">
    <!-- Main hero unit for a primary marketing message or call to action -->
    <!-- <div class="span6">&nbsp;hlo world</div> -->
    <div id="main">
        <div class="row">
            <div class = "span4 offset4"  style = "border:1px solid red">
                <div class="row">
                    <div class="span4">
                        <p><a class="btn btn-primary btn-large">Roll The Dice &raquo;</a></p>
                        <div class="alert alert-success">
                            <strong>Don</strong> wins!!
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="span2">
                        <h2>Don's stats</h2>
                        <ul>
                            <li>Rolls: 764</li>
                            <li>Wins: 322</li>
                            <li>%: 0.532</li>
                            <li>Profit: $5297</li>
                        </ul>
                    </div>
                    <div class="span2">
                        <h2>Ang's stats</h2>
                        <ul>
                            <li>Rolls: 764</li>
                            <li>Wins: 322</li>
                            <li>%: 0.532</li>
                            <li>Profit: $5297</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>

如何在不替换以下示例中的内容的情况下调整边框大小？

1 个答案: