css – Bootstrap：有没有办法让布局更紧凑？

只是好奇是否有办法通过bootstrap获得更紧密的布局.

为什么文本元素之间有这么大的空间？

是否只是为了容纳垫,电话等？

有没有办法为整个页面选择更严格的样式来默认？

我也认为编辑框本身太大了.文本和框边缘之间浪费的空间太多.

为什么他们不紧张？

尝试在NetworkNerd的回答中使用代码后添加了这些编辑

我在样式表中添加了以下内容.

input[type=text]{
       padding-top:0px; padding-bottom:0px;
       margin-bottom:0px; /* Reduced from whatever it currently is */
       margin-top:0px; /* Reduced from whatever it currently is */
       height:24px;
    }

这些添加使我的表单如下所示：

你可以看到事情变得更紧,但这只是因为身高：24px风格.

其他变化似乎对外观没有任何影响.

顺便说一句,包含此更改的样式表是最后一个包含的.

标签不对齐

此外,请注意,现在我已经更改了标签未与其关联的文本输入对齐.

文本框之间的余量仍然太多

文本框之间似乎仍有太多的边距空间.

标题的HTML代码段

这是HTML的一个片段,它显示了应用Bootstrap样式的HTML.
这些都只是从bootstrap网站上的样本中复制而来.

<form class="form-horizontal" role="form">
        <div class="form-group">
            <label for="titleText" class="col-sm-2 control-label">Title</label>
            <div class="col-sm-6">
                <input id="titleText" class="form-control" type="text" ng-model="book.title" />
            </div>
        </div>

Bootstrap不建议编辑bootstrap.css本身.建议按照最佳实践修改另一个主导CSS文件中的引导程序样式.

尝试做这样的事情：

自定义CSS

input[type=text]{
   padding:0px;
   margin-bottom:2px; /* Reduced from whatever it currently is */
   margin-top:2px; /* Reduced from whatever it currently is */
}

如果它是顶部或底部的边距,很难从图中看出来.您可以根据测试结果删除margin- [top | bottom].

输入元素也可能不是带边距的元素,它可能是标签元素(Bootstrap,至少在我的经验中,用标签元素做一些奇怪的事情……)

另一个编辑：我喜欢给人们选择.因此,如果它位于表元素中,请考虑将表压缩类添加到表标记中以减少项之间的一些空格,如下所示：

<table class="table table-condensed">