小编Ree*_*ius的帖子

bootstrap轮播滑块自定义箭头

好的

我正在使用bootstraps轮播滑块,但使用自定义图像而不是随附的glyphicons.

然而,它的问题在于它们朝向滑块的边缘定位.左上角为左箭头,右上角为右图.

我已经尝试改变位置,但是当窗口重新调整大小时,它不会停留在它们的位置.我不知道在哪里定位代码,以便代码忽略悬停在箭头上时出现的阴影.

这是html.

<div class="container-fluid banner_fluid">
    <div class="carousel slide" data-ride="carousel" id="carousel_slider">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/home_banner_1.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_2.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_3.jpg" alt="home slide 1" />
            </div>
        </div>
        <div href="#carousel_slider" class="left carousel-control" data-slide="prev">
            <span>
                <img src="images/chevron_left.jpg" />
            </span>
        </div>
        <div href="#carousel_slider" class="right carousel-control" data-slide="next">
            <span>
                <img src="images/chevron_right.jpg" />
            </span>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我使用开发人员工具快速查看和测试不同的选项.绝对位置不起作用.有没有其他方法可以实现它,所以它们与原始glyphicons出现在同一位置并做出响应?

带有建议修复的图片......这个权利似乎只是问题.

到目前为止,代码中所做的更改是在轮播控件本身的类中添加了css和img-responsive.

------------- banner ----------------*/

 .banner_fluid {
   padding-left:0;
   padding-right:0;
}

.carousel-control …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

7
推荐指数
1
解决办法
4万
查看次数

在html css中设计的大引号

如何用这些巨大的引号来设定引号?

我尝试过在线显示的大部分示例.使用带有:before和:after css样式的块引用.由于响应性的原因,我遇到的问题是避免在div中使用图像.我也在使用Twitter Bootstrap框架.

html中的引用:

<div class="container">
    <blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>
Run Code Online (Sandbox Code Playgroud)

和css:

blockquote {
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
margin-bottom:-30px;
}

blockquote h3 {
    font-size:21px;
}

blockquote h3:before { 
    content: open-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
} 
blockquote h3:after { 
    content: close-quote;
    font-weight: bold;
    font-size:100px;
    color:#889c0b;
}
Run Code Online (Sandbox Code Playgroud)

我想要达到的最终结果

问题就是看起来像这个例子.虽然响应性确实有点工作.引号不是彼此对角放置的

html css twitter-bootstrap blockquote

6
推荐指数
2
解决办法
3万
查看次数

标签 统计

css ×2

html ×2

twitter-bootstrap ×2

blockquote ×1