Question

只是好奇是否有办法通过引导程序获得更紧密的布局。

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

这只是为了容纳垫子，手机等吗？

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

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

为什么他们不紧张？

尝试在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;
    }

这些新增内容使我的表单如下所示：

doesn't quite work

你可以看到事情变得更紧，但这只是因为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元素（Bootstrap，至少在我的经历中，使用label元素做了一些奇怪的事情......）

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

<table class="table table-condensed">

Answer 2

您可以进入bootstrap.css并找到填充和边距值并更改它们或在另一个样式表中执行此操作

Answer 3

在Bootstrap 4中，您可以使用form-control-sm类。参见https://getbootstrap.com/docs/4.1/components/forms/#sizing

这直接来自Bootstrap文档，

<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

在Bootstrap 4之前，您可以使用input-sm。参见https://getbootstrap.com/docs/3.3/css/#forms-control-sizes

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

3 个答案:

自定义CSS