【问题标题】:bootstrap jumbotron full width image引导 jumbotron 全角图像
【发布时间】:2016-04-21 20:48:54
【问题描述】:

我在所有页面上都有封面。我正在使用 jumbotron 来获得全宽图像。但它在左右两侧留有空间。我添加了margin-left,所以左边的空白空间消失了,但右边的空间仍然存在。此外,当我调整浏览器大小时,右侧有一个非常大的空间。

<div id="cover-success" class="jumbotron">
   <div class="container">
        <div class="overlay">
            <div class="text-center">
                <h1>Success Stories</h1>
                <h2>Here are some of the many resolved complaints.</h2>
            </div>
        </div>
    </div>
</div>

使用的 CSS:

#cover-success.jumbotron {
background-size: cover;
background-image: url('Images/cover-success-stories.jpg');
 position:absolute;
width:100%;
margin-top: -14px;
margin-left: -70px;
margin-right:-50px;
height: 270px;
}

【问题讨论】:

    标签: html asp.net twitter-bootstrap


    【解决方案1】:

    也尝试填充

     #cover-success.jumbotron {
     background-size: cover;
     background-image: url('Images/cover-success-stories.jpg');
     position:absolute;
     width:100%;
     margin: 0px;
     padding: 0px;
     height: 270px;
     }
    

    【讨论】:

    • 我试过了,但是左边有一个空白区域,图像在右边移动了一点,我得到了一个我不想要的水平滚动条
    • 似乎是图像大小比例问题..为滚动条添加溢出:隐藏;并尝试改变高度
    • 我做了.. 但没用.. 面临同样的问题.. 图片比例很好。看到这张封面图片:ichangemycity.com/bangalore/success-stories
    • 两个建议 .1- 尝试不使用绝对位置 2) 尝试使用萤火虫检查以找到负责它的 css 元素 .. 给我一个反馈,否则给我一个实时链接来检查我自己生活问题..
    猜你喜欢
    • 1970-01-01
    • 2019-11-03
    • 2014-10-01
    • 2014-06-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多