html - Bootstrap : vertical align and jumbotron height

标签 html css twitter-bootstrap

我在互联网上搜索了 4 个小时,但没有找到解决方案。

我想为 HTML/CSS 简历创建标题。 我想要这样的标题:http://hpics.li/ece0449

但我有一个问题,我不能在我的 css 中修改 Jumbotron 高度,而不删除垂直对齐约束。

另外,我无法将超大屏幕的高度固定为小于 50px

请帮助我:)

HTML:

<body>
        <div class="jumbotron">
            <div class="row">
                <div class="col-md-4 header_element">
                    <span class = "title_header">ADRESS</span> : XXX
                </div>
                <div class="col-md-4 header_element">
                    <span class = "title_header">PHONE</span> : XXX
                </div>
                <div class="col-md-4 header_element">
                    <span class = "title_header">EMAIL</span> : XXX
                </div>
            </div>
        </div>   
</body>

CSS:

.jumbotron{
background-color : #20B08F !important;
color : #FFFFFF;
}

.header_element{
background-color : #20B08F !important;
color : #FFFFFF;    
}

.header_element{
font-family: OpenSans_Light;
text-align : center;
}

.title_header{
font-family : OpenSans_Bold;
}

最佳答案

.jumbotron 没有设置高度,它的高度来自padding。减少以下数字以获得更小的超大屏幕:

.jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
}

See example.

关于html - Bootstrap : vertical align and jumbotron height,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33866913/

相关文章:

javascript - 如何在不丢失比例的情况下缩放背景图像

jquery - Bootstrap Navbar Hamburger 菜单无法打开,下方有容器

javascript - 具有固定高度和水平滚动的 HTML 列布局

JQuery - 按类获取父级的父级

CSS垂直拉伸(stretch)到背景

javascript - 如何从 Bootstrap 搜索栏获取输入并将其放入 ajax 调用中以检索数据?

html - 如何从侧面折叠 Bootstrap 导航栏

javascript - 如何修复 Three.js Cube 细线框?

html - 为什么 td 文本颜色没有改变

jQuery + CSS 滚动到容器部分