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

html - 行顶部和底部有更多的空白区域,第1张

我遇到了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>

最佳答案:

3 个答案:

答案 0 :(得分:3)

您需要做的就是在代码中添加以下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视图有点小,这就是为什么你看到两行

答案 1 :(得分:1)

你必须设置:

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

Here a JSFiddle example to play with

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

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

的详情,请查看此信息

答案 2 :(得分:0)

p{
    margin: 5px 0px;

}
.clearfix {
    zoom: 1;
}

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

    .clearfix:after {
        clear: both;
    }

使用带行的clearfix类。

DABAN RP主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
教程弟学习网站 » html - 行顶部和底部有更多的空白区域

0条评论

发表评论

提供最优质的资源集合

立即查看 了解详情