Question

我遇到了bootstrap行的问题，我在行的顶部和底部获得了更多的空白区域，我需要删除它，我希望行只有其中文本的高度。

HTML如下：

  <div class="row">
        <div class="col-sm-6 text-muted">
            <p>Author</p>
        </div>
        <div class="col-sm-6 text-right font-bold">
            <p>abcd</p>
        </div>
      </div>
      <div class="row row-divider"></div>
      <div class="row">
        <div class="col-sm-6 text-muted">
            <p>Date Created</p>
        </div>
        <div class="col-sm-6 text-right font-bold">
            <p>Nov 28, 19:30</p>
        </div>
      </div>
      <div class="row row-divider"></div>
      <div class="row">
        <div class="col-sm-6 text-muted">
            <p>File Type</p>
        </div>
        <div class="col-sm-6 text-right font-bold">
            <p>Microsoft Word</p>
        </div>
      </div>
      <div class="row row-divider"></div>
      <div class="row">
        <div class="col-sm-6 text-muted">
            <p>Last Modified</p>
        </div>
        <div class="col-sm-6  text-right font-bold">
          <p>Dec 08, 11:00</p>
        </div>
      </div>

Answer 1

您需要做的就是在代码中添加以下CSS：

public class ConcurrentHashMap<K,V> extends AbstractMap<K,V>
implements ConcurrentMap<K,V>, Serializable {
private static final long serialVersionUID = 7249069246763182397L;

你基本上告诉你所有的段落都有0个边距，所以行高等于文本高度。

另外，您可能希望在.row-divider { height: 1px; margin: 0px; overflow: hidden; background-color: #e7eaec; } p { margin: 0; padding: 0; line-height: 1; }标记上使用text-muted类，而不是包含<p>标记的整个<div>。为什么？因为例如明天你将向该div添加两行不需要<p>的行，你需要定义一个新类来取消这些值。 设计你需要的东西，只有那些。

如果你想在Jsfiddle的同一行上左侧文本和右侧文本只需将text-muted类更改为col-sm-x类，基本上，jsfiddle视图有点小，这就是为什么你看到两行

Answer 2

你必须设置：

p{
    margin: 0;
    line-height: 14px; /*you can reduce this value to achieve what you want*/
}

Here a JSFiddle example to play with

请注意.row-divider有margin: 9px 0px，如果您愿意，可以将其缩小到更接近上面的文字。

有关line-height http://www.w3schools.com/cssref/pr_dim_line-height.asp

的详情，请查看此信息

Answer 3

p{
    margin: 5px 0px;

}
.clearfix {
    zoom: 1;
}

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
        line-height: 0;
    }

    .clearfix:after {
        clear: both;
    }

使用带行的clearfix类。

行顶部和底部有更多的空白区域

3 个答案: