Question

我想增加我的jumbotron的高度，而不是在课堂上给它，因为那样它就没有更多的响应。我想做this。但我的看起来像this

这是我的代码 HTML：

<div class="container">
            <div class="row">
                <div class="jumbotron">
                    <div class="col-md-10">
                        <h2 class="meeting_heading">MeetingResult is dedicated to ridding the world of ineffective, under-performing and outright wasteful business meetings.</h2>
                    </div>
                    <div class="col-ms-2">
                        <button type="button" class="btn btn-default btn-lg btn-custom">Learn More</button>
                    </div>
                </div>
            </div>
        </div>

CSS：

.container 
{
    width:87%;
}
.jumbotron
{
    box-shadow: inset 0px -8px 0 rgba(0, 0, 0, 0.1);
    border-radius: 13px;
    background-color: #FAFAFA;
    min-height:300px;
}
.btn-custom
{
    width: 152px;
    background-color: #1abc9c;
    border: none;
    color:#ffffff;
    font-size: 21.994px;
    line-height: 22px;
    padding: 15px 20px 16px;
    position: relative;
    top: 13px;
    right: 4px;
}

Answer 1

看起来它工作正常..

但是你的身边应该有另一种情况，你的jumbotron可能会从它的父母那里继承，所以你需要在那里使用padding并使这条规则像这样重要。

    .jumbotron {
        padding: 48px 60px !important;
    }

或者你可以像使用min-height那样使用：

    .jumbotron {
        min-height: 300px !important;
    }

它可以解决你的问题......！

增加jumbotron的高度

1 个答案: