web-dev-qa-db-fra.com

Comment placer Content DIV sur le carrousel de bootstrap et le rendre réactif?

Je souhaite placer un contenu DIV sur le carrousel bootstrap dans les grands écrans et les écrans de bureau Voir l'image ci-dessous pour votre compréhension. 

Example on screen

Dans mobile et onglet, cela devrait ressembler à ceci: 

Example on mobile

Je ne sais pas comment créer cette présentation à l'aide de bootstrap 3. J'espère que quelqu'un pourra m'aider. 

Ceci est ma marque actuelle: 

<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">
                &lsaquo;
            </a>
    <a class="right carousel-control" href="#homepage-feature" data-slide="next">
                &rsaquo;
            </a>
  </div>
  <!-- /#homepage-feature.carousel -->

  <div style="width: 300px; height: 500px; background: red;"></div>

</main>

htmlcsstwitter-bootstrap
9
user3733831

enter image description here

DEMO: https://jsbin.com/lufoli

Mettez en miroir la taille du conteneur. À chaque largeur de rupture, c'est le parent appelé ".red". Centrez cet élément .red absolu avec la position gauche: 50%, puis une marge négative égale à 1/2 de la largeur à chaque point de rupture. Ajoutez ensuite le formulaire/div à l’intérieur de ce parent et rincez-le à la largeur minimale.

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

<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 -->
13
Christina

Ici vous allez: http://jsfiddle.net/3nsk24my/3/

#layer    {
    position: fixed;
    top: 0px;
    background-color:rgba(0,0,0,0);
    width: 100%;
    z-index:5;
}
1
AndrewL64

Essayez d'ajouter ligne après conteneur, le style de colonne selon vos besoins. J'ai créé un carrousel générique avec un contenu de bloc qui peut être placé n'importe où dans le carrousel et qui est totalement réactif. S'il vous plaît jeter un oeil à la démo.

/* 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>

J'espère que cela peut vous aider. 

1
ami070ipec

Est-ce que cette solution est valable?

J'ai enveloppé le carrousel avec div et mettre le contenu div (le vert) à l'intérieur de cette div. Ensuite, je mets un peu de style:

.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;
    }
}

DEMOhttp://jsfiddle.net/mattydsw/qfawphpe/

0
mkutyba

Essayez d’ajouter une ligne, un style de colonne dans le carrousel, mais modifiez le css de l’image pour obtenir la taille de div qui contient l’image et non le style d’image initial défini dans bootstrap pour une image de carrousel.

    <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>

Échantillon ici

0
Lepanto

Vous pouvez positionner la division de contenu pour les grands périphériques et pour les plus petits, supprimer la position absolue à l'aide de requêtes multimédia

.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
    }
}

Fiddle

0
anpsmn