我正在向我的网站添加 Bootstrap 轮播。我需要将 Bootstrap 标题放置在图像外部的右侧部分。我做到了，但标题没有随容器调整？如果有人知道如何解决这个问题，那就太好了......
<style>
.img-swap {
cursor: pointer;
}
.content-container:after {
clear: both;
content: "";
display: block;
}
.fullview {
height: 16px;
padding: 0px;
width: 18px;
}
.clean {
background-position: -253px 0;
}
.hide-sidebar { margin-left: -253px; }
.clean { background-position: -253px 0; }
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.slider-container {
margin-top:35px;
height:100%;
}
.carousel-caption {
position: absolute;
top: 0;
text-align: left;
left: inherit;
right: inherit;
width: 200px;
color:#000;
}
.carousel-caption:not(#caption-0) {
display: none;
}
@media (max-width: 1024px) {
.right-side-content .wrapper { margin-right: 20px; }
.right-side-content.full-content .wrapper { margin-right: -253px; }
body { background-position: -253px 0; }
body.clean { background-position: 0 0; }
.left-side-content { margin-left: -253px; z-index: 99; }
.left-side-content.hide-sidebar { margin-left: 0; }
}
</style>
</head>
<body class="">
<header class="title hidden-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li><a href="#" class="fb-landing-icon hudooku-sprite"></a></li>
<li><a href="#" class="twt-landing-icon hudooku-sprite"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<header class="title visible-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li><a href="#" class="fb-landing-icon hudooku-sprite"></a></li>
<li><a href="#" class="twt-landing-icon hudooku-sprite"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<div class="clearfix">
</div>
<div class="content-container bg-light-gray">
<div class="container">
<div class="row">
<div class="container slider-container">
<div class="row">
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/landing/carousel_bg_4.jpg">
</div>
<div class="item">
<img alt="Second slide" src="images/landing/carousel_bg_2.jpg">
</div>
<div class="item">
<img alt="Third slide" src="images/landing/carousel_bg_3.jpg">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, im. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
</div>
</div>
<a data-slide="prev" role="button" href="#slider" class="left carousel-control"><span class="glyphicon glyphicon-chevron-down"></span></a>
<a data-slide="next" role="button" href="#slider" class="right carousel-control"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
<!-- /.container -->
</div>
<div class="footer">
<div class="footer-menu">
<ul>
<li class="padd-lt0"><a href="#">Mobile App</a></li>
<li><a href="#"> About </a></li>
<li><a href="#">Terms & Privacy Policy</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Disclaimer</a></li>
<li class="border-rt-none"><a href="#">Blog</a></li>
</ul>
</div>
<div class="copyright-sec">
2014, Copyright ©<a href="#"><img src="images/hudooku-footer-logo.png"></a>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- ============= SCRIPTS ============= -->
<!--<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
<script type="text/javascript">
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
</script>
</body>
</html>
最佳答案
您必须从底部向您的 carousel-caption 类提供位置。
如下:
.carousel-caption { bottom:-95px; }
要在 carousel-inner 类之外显示标题，您必须将 padding Bottom 设置到该类中，否则标题将不会显示。它将由于溢出而隐藏
.carousel-inner { padding-bottom:95px; }
关于javascript - 轮播外的 Bootstrap 标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25095260/