【问题标题】:Bootstrap - Carousel in half of pageBootstrap - 半页轮播
【发布时间】:2016-07-08 21:21:11
【问题描述】:

我想在页面的一半(在桌面)中使用 Bootstrap 轮播。这是我的代码:

HTML:

        <div>
            <div class="row">
                <div class="col-md-6">
                    <div id="carousel-homepage" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-homepage" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-homepage" data-slide-to="1"></li>
                            <li data-target="#carousel-homepage" data-slide-to="2"></li>
                        </ol>

                        <div class="carousel-inner">
                            <div class="item active">
                                <a href="#"><img src="http://placehold.it/1600x1600" /></a>

                            </div>
                            <div class="item">
                                <a href="#"><img src="http://placehold.it/1600x1600" /></a>

                            </div>
                            <div class="item">
                                <a href="#"><img src="http://placehold.it/1600x1600" /></a>

                            </div>
                        </div>

                        <a class="left carousel-control" href="#carousel-homepage" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-homepage" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </div>
                </div>

                <div class="col-md-6 low-padding-left"></div>

这是我的结果:

我想把轮播完全放在页面的一半。有什么建议吗?

【问题讨论】:

  • 从第一个.col-md-6 div 中删除填充或添加style="padding:0"
  • 把它作为答案。谢谢

标签: html css twitter-bootstrap carousel


【解决方案1】:

从第一个 .col-md-6 div 中删除填充或添加 style="padding:0"

【讨论】:

    猜你喜欢
    • 2020-08-18
    • 2017-03-31
    • 2021-08-31
    • 2014-11-13
    • 1970-01-01
    • 1970-01-01
    • 2019-09-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多