Html 如何将内容 DIV 放在引导轮播上并使其响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28722010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:35:23 来源:igfitidea点击:
How to place Content DIV on bootstrap carousel and make it responsive?
提问by user3733831
I want to place a content DIVon bootstrap carousel in large and desktop screens. See below image for your understanding.
我想DIV在大屏幕和桌面屏幕的引导轮播上放置内容。请参阅下图以供您理解。
In mobile and tab screen it should be something like this -
在移动设备和标签屏幕中，它应该是这样的 -
I am not sure how to create this layout using bootstrap 3. Hope somebody may help me out.
我不确定如何使用引导程序 3 创建此布局。希望有人可以帮助我。
This is my current Mark Up:
这是我目前的标记：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">
<div id="homepage-feature" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: cover;">
<div class="container">
<div class="carousel-caption">
<h3>Providing you the Best</h3>
<h1>Cleaning Companies</h1>
<p>in Bahrain with 10% Discount.</p>
</div>
</div>
</div>
<div class="item" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: cover;">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
‹
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
›
</a>
</div>
<!-- /#homepage-feature.carousel -->
<div style="width: 300px; height: 500px; background: red;"></div>
</main>回答by Christina
DEMO: https://jsbin.com/lufoli
演示：https: //jsbin.com/lufoli
Mirror the size of the .container at every break width and that is the parent called ".red". Center that .redabsolute positioned element by using left: 50% and then a negative margin 1/2 the width at every break point. Then add the form/div inside that parent and flush it right at the min-width.
在每个中断宽度处镜像 .container 的大小，即名为“ .red”的父级。.red使用 left: 50%将绝对定位元素居中，然后在每个断点处使用 1/2 宽度的负边距。然后在该父级中添加 form/div 并在最小宽度处将其刷新。
CSS
CSS
.slide-wrapper {
position: relative
}
.red {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.red-content {
width: 100%;
height: 300px;
background: red;
color: #fff;
}
@media (min-width: 768px) {
.carousel-caption {
text-align: left;
padding-right: 300px;
}
.red {
width: 750px;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
padding: 20px 0;
margin-left: -375px;
}
.red-content {
width: 300px;
float: right;
height: 100%;
background: red;
color: #fff;
margin-right:15px; /* width of .container gutter */
}
}
@media (min-width: 992px) {
.red {
width: 970px;
margin-left: -485px;
}
}
@media (min-width: 1200px) {
.red {
width: 1170px;
margin-left: -585px;
}
}
/* MISC */
#homepage-feature .item {
overflow: hidden;
height: 400px;
background-color: transparent;
background-size: cover;
}
#homepage-feature > .carousel-control {
width: 30px;
font-size: 40px;
color: #fff;
text-shadow: none;
filter: none;
opacity: 1;
}
#homepage-feature > .carousel-control span {
position: absolute;
top: 50%;
margin-top: -30px;
width: 100%;
text-align: center;
display: block;
}
HTML
HTML
<div class="slide-wrapper">
<div id="homepage-feature" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background-image:url(http://lorempixel.com/1500/600/abstract)">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a>
</p>
</div>
</div>
<div class="item" style="background-image:url(http://placehold.it/1500x600)">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</p>
</div>
</div>
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
<!-- /#homepage-feature.carousel -->
<div class="red">
<div class="red-content">
Content goes here.
</div>
</div>
</div>
<!-- /.container.slide-wrapper -->
回答by ami070ipec
Try adding row after container, column style as per you requirement. i have made a generic carousel with a block content which can be place anywhere in the carousel and its fully responsive. please have a look to the demo .
尝试根据您的要求在容器、列样式后添加行。我制作了一个带有块内容的通用轮播，它可以放置在轮播中的任何地方，并且完全响应。请看一下演示。
/* Styles go here */
.container {
margin-top: 20px;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner img {
width: 100%;
max-height: 460px
}
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 0;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 0;
}
.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.header-text h2 {
font-size: 40px;
}
.header-text h2 span {
background-color: #2980b9;
}
.header-text h3 span {
background-color: #000;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}
.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="row">
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide">
<!-- Static Header -->
<div class="header-text ">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to <strong>demo center</strong></span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Second slide">
<!-- Static Header -->
<div class="header-text ">
<div class="col-md-12 text-center">
<h2>
<span>Welcome to the world of bootstrap</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
</div>
</div><!-- /header-text -->
</div>
<div class="item">
<img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Third slide">
<!-- Static Header -->
<div class="header-text ">
<div class="col-md-12 text-center">
<h2>
<span>Bootstrap is awesome</span>
</h2>
<br>
<h3>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</h3>
<br>
</div>
</div><!-- /header-text -->
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /carousel -->
</div>
</div>
</body>Hope this can help you.
希望这可以帮到你。
回答by AndrewL64
Here you go: http://jsfiddle.net/3nsk24my/3/
给你：http: //jsfiddle.net/3nsk24my/3/
#layer {
position: fixed;
top: 0px;
background-color:rgba(0,0,0,0);
width: 100%;
z-index:5;
}
回答by mkutyba
Is this valid solution?
这是有效的解决方案吗？
I wrapped carousel with divand put content div (the green one) inside this div. Then I put some styling:
我用旋转木马包裹div并将内容 div（绿色的）放在这个 div 中。然后我放了一些样式：
.content-div {
text-align: center;
background: #090;
color: #fff;
width: 100%;
height: 150px;
}
@media (min-width: 992px) {
.content-div {
position: absolute;
top: 0;
right: 0;
width: 300px;
}
}
回答by anpsmn
You can position the content div for larger devices and for smaller device remove the absolute position using media queries
您可以为较大的设备定位内容 div，对于较小的设备，使用媒体查询删除绝对位置
.green {
width: 300px;
height: 300px;
background: green;
position:absolute;
right: 5px;
top: 0;
color: #fff;
z-index: 100
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
.green {
position: relative
}
}
回答by Lepanto
Try adding row, column style within carousel like following, but tweak image resizing css to get the size of div that holds the image and not the original image style defined in bootstrap for carousel image
尝试在轮播中添加行、列样式，如下所示，但调整图像大小调整 css 以获得保存图像的 div 的大小，而不是在 bootstrap 中为轮播图像定义的原始图像样式
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-6">
<img src="http://lorempixel.com/1500/600/abstract">
</div>
<div class="col-xs-12 col-sm-6">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-6">
<img src="http://placehold.it/1500X600">
</div>
<div class="col-xs-12 col-sm-6">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
Sample here
样品在这里
