在bootstrap轮播中，如何删除图像和.carousel div之间的空间？

时间：2017-06-18 11:29:39

标签： html css html5 css3 bootstrap-4

图像右侧有灰色区域（如下图所示）。如果我将图像置于旋转木马内，则灰色区域在图像的左右均匀分布。有没有办法删除它并使旋转木马与图像大小相同。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
    <title>Test</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .item {
            max-height: 400px;
        }

    </style>
</head>

<body>
    <!------------nav bar ---------------------->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">HOME</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">REFERENCES</a></li>
            </ul>
        </div>
    </nav>


    <!--------------Centering div --------------->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- 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>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
                        </div>

                        <div class="item">
                            <img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
                        </div>

                        <div class="item">
                            <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
                        </div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>


            </div>

        </div>

    </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

额外空间

enter image description here

2 个答案:

答案 0 :(得分：2)

根据您的图片宽度为800px，此规则修复了

#myCarousel {
  margin: 0 auto;
  max-width: 800px;
}

Stack snippet 

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .item {
            max-height: 400px;
        }
        #myCarousel {
          margin: 0 auto;
          max-width: 800px;
        }

    </style>
</head>

<body>
    <!------------nav bar ---------------------->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">HOME</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">REFERENCES</a></li>
            </ul>
        </div>
    </nav>


    <!--------------Centering div --------------->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- 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>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
                        </div>

                        <div class="item">
                            <img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
                        </div>

                        <div class="item">
                            <img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
                        </div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>


            </div>

        </div>

    </div>

</body>

</html>

答案 1 :(得分：2)

一个快速解决方法，添加此css：

.carousel-control.right,
.carousel-control.left {
    background: transparent!important; 
}

灰色区域是控制按钮的背景颜色。即使图像左对齐，它仍然在那里，它更难以看到。

检查here

相关问题
最新问题