[英]How can I make carousel use 2 row in 1 column using Bootstrap
From what I understand about row and col, number 1 would be one row with .col-12, then number 2 and 3 in one row but with carousel in the middle using two row. 根据我对row和col的了解,数字1将是带有.col-12的一行,然后数字2和3在一行中,而轮播在中间则是两行。 can it be done?
能做到吗
<!--Carousel & Main Menu-->
<div class="container websiteheader">
<br>
<!--New Menu-->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<a href="bim.htm"><img class="center-block" src="images/menu/icon-new.png"></a>
<h4 class="text-center">New</h4>
</div>
</div>
<!--New Menu-->
<div class="row">
<!-- Support Menu-->
<div class="col-md-2">
<img class="center-block" src="images/menu/icon-support.png">
<h4 class="text-center">SUPPORT</h4>
</div>
<!-- Support Menu-->
<!-- Carousel-->
<div id="myCarousel" class="carousel slide">
<div class="col-md-8">
<!--Carousel Bullets Indicators-->
<ol class="carousel-indicators">
<li data-target="myCarousel" data-slide-to="0" class="active"></li>
<li data-target="myCarousel" data-slide-to="1"></li>
<li data-target="myCarousel" data-slide-to="2"></li>
</ol>
<!--Carousel Bullets Indicators-->
<!--Carousel Item List-->
<div class="carousel-inner">
<div class="item active">
<img src="images/carousel/index/index-001.jpg" width="100%" alt="VNIX MY">
<div class="carousel-caption">
<h3>Title 1</h3>
<p>Para 1<br>
Para 2<br>
Para 3</p>
</div>
</div>
<div class="item">
<img src="images/about/index-002.jpg" width="100%" alt="VNIX MY">
<div class="carousel-caption">
<h3>Title 2</h3>
<p>This is slider 2 paragraph</p>
</div>
</div>
<div class="item">
<img src="images/about/index-003.jpg" width="100%" alt="VNIX MY">
<div class="carousel-caption">
<h3>Title 3</h3>
<p>This is slider 3 paragraph</p>
</div>
</div>
</div>
<!--Carousel Item List-->
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<!-- Carousel nav -->
</div>
</div>
<!-- Carousel-->
<!-- Services Menu-->
<div class="col-md-2">
<img class="center-block" src="images/menu/icon-services.png">
<h4 class="text-center">SERVICES</h4>
</div>
<!-- Services Menu-->
<div class="col-md-10">
<div class="col-md-2">
<img class="center-block" src="images/menu/icon-about_us.png">
<h4 class="text-center">ABOUT US</h4>
</div>
</div>
<div class="row">
<div class="col-md-2">
<img class="center-block" src="images/menu/icon-about_us.png">
<h4 class="text-center">ABOUT US</h4>
</div>
</div>
</div>
<br>
This is what I want to achieve http://s22.postimg.org/5h5n94s3l/image.jpg This is currently I got from the codes http://s28.postimg.org/uf0kisou5/image.jpg 这就是我想要实现的目标http://s22.postimg.org/5h5n94s3l/image.jpg当前这是我从代码http://s28.postimg.org/uf0kisou5/image.jpg获得的
You can try this.. Give borders to them so that you can test it. 您可以尝试。.给它们加上边框,以便您可以对其进行测试。 This should work
这应该工作
<div class = "navbar">
</div>
<div class = "navbar">
<div class = "row">
<div class = "col-sm-3">
<div class = "col-sm-12"></div>
<div class = "col-sm-12"></div>
</div>
<div class = "col-sm-6"></div>
<div class = "col-sm-3">
<div class = "col-sm-12"></div>
<div class = "col-sm-12"></div>
</div>
</div>
</div>
<div class = "navbar">
</div>
Just add borders and custom height to see it in action. 只需添加边框和自定义高度即可查看实际效果。 Be sure you did not customize the bootstrap css, just do it later if you see the result.
确保您没有自定义引导CSS,请稍后再查看结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.