Har*_*M V 2 twitter-bootstrap twitter-bootstrap-3
我有一个带有图像的Slider作为一个滑动组件,我想要放置一个恒定的内容块,它将显示在与页面对齐的中心的块的中心,而不管屏幕大小如下所示.

<div id="homeSlider">
<!-- Slider -->
<div class="carousel" id="my-carousel">
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
<li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image:url(img/slider_img2.jpg);"></div>
<div class="item" style="background-image:url(img/slider_img1.jpg);"></div>
<div class="item" style="background-image:url(img/slider_img3.jpg);"></div>
</div>
<a href="#my-carousel" class="carousel-control left" data-slide="prev">‹</a> <a href="#my-carousel" class="carousel-control right" data-slide="next">›</a> </div>
<!-- /Slider -->
<div class="mainPitch">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Reach out to Apartment Residents</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<div class="mainAction"><a class="btn btn-danger" href="">a</a><a class="btn btn-success" href="">a</a></div>
</div>
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
你的HTML #mainPitch:
<div class="mainPitch" style="position:absolute; top:50px;">
<div class="container">
<div class="row">
<div class="col-xs-6" style="text-align:center;">
<h1>Reach out to Apartment Residents</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
<div class="mainAction"><a class="btn btn-danger" href="">a</a><a class="btn btn-success" href="">a</a></div>
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
将您的轮播包裹在一个.col-xs-6或根据您的轮播宽度更改班级.
| 归档时间: |
|
| 查看次数: |
24245 次 |
| 最近记录: |