Html 在以下示例中，如何调整边框大小而不替换内容？_Html_Css_Twitter Bootstrap

Html 在以下示例中，如何调整边框大小而不替换内容？

html css twitter-bootstrap

Html 在以下示例中，如何调整边框大小而不替换内容？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,JSFIDLE已关闭，因此我将在下面附加一小块原始HTML。它基本上是由黑色边框包围的少量内容。目前边界太宽。目前，在bootstrap.css中有一行被注释掉了 width: 320px; 这是我想要的实际宽度，但当我取消注释这一行时，内容被完全替换。如何在保留正确布局的同时减少黑色边框的宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <t

JSFIDLE已关闭，因此我将在下面附加一小块原始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>


引导，来自Twitter
身体{
填充顶部：60px；/*60px，使容器一直到顶部栏的底部*/
}
掷骰子»
Don获胜！！
唐的统计数据

注册人数：764
胜：322
%：0.532
利润：5297美元

Ang的统计数据

注册人数：764
胜：322
%：0.532
利润：5297美元

您不能更改#主宽度，也不能保持跨距宽度不变。如果希望整个页面的最大宽度为320px，则必须将span1、2、3等声明编辑为比以前的声明大320/12（而不是现在的940px）。但是，如果您只希望边界区域的宽度为320px，则可以从#main元素中删除边界，并将其放置到内部span4元素中，如下所示（我放置了一个内嵌的红色边界来描述示例）：


引导，来自Twitter
身体{
填充顶部：60px；/*60px，使容器一直到顶部栏的底部*/
}
掷骰子»
Don获胜！！
唐的统计数据

注册人数：764
胜：322
%：0.532
利润：5297美元

Ang的统计数据

注册人数：764
胜：322
%：0.532
利润：5297美元

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