Bootstrap:有没有办法让布局更紧凑？

Question

只是好奇是否有办法通过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;
    }

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

你可以看到事情变得更紧,但这只是因为height: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>

Answer 1

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]根据测试结果删除.

也有可能该input元素不是一个有利润,也可能是label元,而不是(引导,至少在我的经验,做一些奇怪的事情与label元素...)

另一个编辑:我喜欢给人们选择.因此,如果这是在table元素中,请考虑将该table-condensed类添加到table标记以减少项之间的一些空白,如下所示:

<table class="table table-condensed">