Question

我正在尝试使用bootstrap css创建标准的响应式页面。刚创建了包含标题，页面内容和侧链接的简单页面。我在这里几乎没有疑问。

我为所有4方留出4％的保证金，但即使为什么顶部和底部边缘比左边少？
为什么井和页眉之间的距离很远？
我把hr用于链接分离，为什么它们之间的距离太大？
我可以将所有边框颜色设置为＃27ae60

链接到小提琴 - http://jsfiddle.net/karimkhan/EjFjr/1/

<div class="container">

    <div class="row clearfix">

        <div class="col-md-12 column">
            <div class="well">
                Welcome ...! 
                Get you timeline info ...
            </div>

            <div class="page-header">
                <h1>
                    <small>Get purified for all desease</small>
                </h1>
            </div>
            <table border="0" width="100%">
                <tr>
                    <td style="width:75%" valign= "top">
                        <p> Triaenops menamena is a bat in the genus Triaenops found on Madagascar, mainly in the drier regions. It was known as Triaenops rufus until 2009, when it was discovered that that name had been incorrectly applied to the species. Triaenops rufus is a synonym of Triaenops persicus, a closely related Middle Eastern species. Triaenops menamena is mostly found in forests, but also occurs in other habitats. It often roosts in large colonies and eats insects such as butterflies and moths. Because of its wide range, common occurrence, and tolerance of habitat degradation, it is not considered to be threatened                             </p>
                    </td>
                    <td style="width:25%" valign= "top">
                        <ul id="newStuff" class="nav nav-tabs nav-stacked">       
                            <li style="display: block;"><a href="/vA2BZNRrVf">2 column Google maps, foursquar..</a></li><hr class="line1">
                            <li style="display: block;"><a href="/ofJ48gWYEr">spsr..</a></li><hr class="line1">
                            <li style="display: block;"><a href="/9EwS0981bU">Bootstrap 3 Control Panel..</a></li><hr class="line1">
                            <li style="display: block;"><a href="/bs7VAhkjwy">twests..</a></li><hr class="line1">
                            <li style="display: block;"><a href="/MPMXbdIm9t">Interdev..</a></li>
                        </ul>
                    </td>                           
                </tr>
            </div>

        </div>

    </div>

Answer 1

您已将margin设置为2％，并且按预期工作。用萤火虫仔细查看边缘。
.well和.page-header之间的空格是因为这些元素的默认css。这是页眉的原始css。查看保证金属性
.page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; }
hr的原因相同。这是原始的css hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; }
是的，你可以。只需将border-color: #27ae60样式应用于包含所有其他元素或body元素

Answer 2

除稻草人的答案外，

您可以使用Chrome开发者工具（甚至IE / Firefox也有相同的选项）来查看您的布局正在发生的事情

在Chrome浏览器中打开您的网页
按 F12
在Chrome开发者工具窗口左上角选择放大镜
悬停/选择您需要检查的元素。

然后检查开发人员工具窗口的右侧面板，您可以看到应用于所选元素的样式（样式选项卡），以及应用于对象的最终值（计算选项卡）+更多

Answer 3

是的，首先，使用开发工具从使用它，我有一些答案

1）如果您谈论.container，请不要同时使用margin和width ...仅使用margin并让宽度展开整页（默认div）

2）.page-header位于h1内，其中有自己的上下边距

3）与2）相同

4) body {border-color: #27ae60}

使用bootstrap css进行页面布局设计

3 个答案: