时间戳

首页 > 解决方案 > 为什么 bootstrap 3 行不扩展以适应内容？

html - 为什么 bootstrap 3 行不扩展以适应内容？

问题描述

我有以下html：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-push-3 col-sm-6 text-center wrapper">
            <div class="col-sm-4 inner-wrapper">
                <span class="text-center circle">A</span>
                <p class="text-center center-block">Click Start Now</p>
                <a href="" class="text-center center-block start-now">Start Now</a>
            </div> <!-- col-sm-4 -->
        </div> <!-- col-sm-6  -->
    </div> <!-- row -->  
</div> <!-- container-fluid -->

将有另外 2 个带有col-sm-4inside的元素col-sm-6。

以及以下 CSS：

.container-fluid{
    margin:10% auto
 }

.wrapper{
    color: #fff;
}

.inner-wrapper{
    background-color: #ccc
}

.circle{
    border-radius: 50%;
    border: 1px solid #d1cfc8;
    background-color: #000;
    padding: 5% 15%;
    font-size: 300%;
 }

.start-now{
    color: #fff;
    background-color: #96d0f1
}

这是使用 Boostrap 实时显示代码的小提琴：http: //jsfiddle.net/aq9Laaew/93303/

如您所见，圆圈超出了row并且不适合内容，并且圆圈在其<p>下方延伸。

问题是什么？我不能提高margin到那个限制吗？是之前的伪元素row造成的吗？

标签： htmltwitter-bootstrapcsstwitter-bootstrap-3

解决方案

如果我理解正确，圆圈会溢出容器顶部，因为它是一个跨度并且默认显示为内联，因此在文档流中无法正确识别元​​素的高度。只需添加display:inline-block到.circle元素中，它就会解决问题。

http://jsfiddle.net/nma51kve/

推荐阅读