Ich habe Bootstrap-Seite, die derzeit nur ein Karussell ist. Ich möchte mein Gitter zentrieren, das auf einem Bootstrap-Karussell ist, aber ungebrochen und reaktionsschnell. Ist das möglich ?Wie zentriert Bootstrap-Spalte auf Karussell?
meine HTML-Struktur:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<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" role="listbox">
<div class="myDiv ">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">left column..</div>
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12">right column..</div>
</div>
</div>
</div>
<div class="item active">
<img src="http://www.aurumhotels.com.tr/resimler/normal/2015-08/FirmaArkaBanner1_4BuFjQUcCp3yALBpDUxLsignature.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.aurumhotels.com.tr/resimler/normal/2015-12/FirmaArkaBanner1_Isrgao2xv47jrJVBsf2Hfirmaarkabanner2.png" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
und meine CSS-Struktur
.myDiv{
position: absolute;
background:#fff;
z-index:1;
}
nopee..I hinzufügen versucht bu es nicht funktioniert .. :)) –
Könnten Sie mehr Details geben auf das, was Sie von einem zentrierten Gitter bedeuten und ungebrochene/ansprechbar? Meinst du, du willst, dass deine zwei Spalten in der Mitte des Karussellbildschirms stehen, nicht an der Spitze? – yoonjesung
ja genau :)) –