Question

我正在使用一个画廊并使用bootstrap的旋转木马，在后端，用户可以用自己的图像替换图像 - 问题是强制图像与父div大小匹配的最佳方法是什么响应？因此，如果用户将上传不同大小的图像 - 它不会搞乱结构。

这是我的旋转木马：

                <div class="col-md-8 right_silder">
                <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="item active">
                    <img src="http://placehold.it/450x350" alt="Slide 1">
                    <div class="carousel-caption">
                      Caption Slide 1
                    </div>
                  </div>
                  <div class="item">
                    <img src="http://placehold.it/450x350" alt="Slide 2">
                    <div class="carousel-caption">
                      Caption Slide 2
                    </div>
                  </div>
                  <div class="item">
                    <img src="http://placehold.it/450x350" alt="Slide 3">
                    <div class="carousel-caption">
                      Caption Slide 3
                    </div>
                  </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>
            </div>
        </div>

这是我的key

Answer 1

将高度添加到轮播的父元素。喜欢

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script src="script.js"></script>

</head>

<body>
 <div class="page_container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12 text-center fiche_header">
                    <p>Header 1</p>
                    <a class="en_savior_btn  selection_btn"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span>Shop</span></a></div>
            </div>
            <div class="row contact_row">
                <div class="col-md-4 left_contact">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet dolore esse eum eveniet iure modi, nostrum officiis porro quisquam recusandae rerum sequi tempore? Animi fugit harum impedit. Consequuntur, laborum?</p>
                </div>
                <div class="col-md-8 right_silder"><!-- Slider -->
                    <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" style="height:300px;">
                      <div class="item active">
                        <img src="http://placehold.it/450x350" alt="Slide 1">
                        <div class="carousel-caption">
                          Caption Slide 1
                        </div>
                      </div>
                      <div class="item">
                        <img src="http://placehold.it/450x350" alt="Slide 2">
                        <div class="carousel-caption">
                          Caption Slide 2
                        </div>
                      </div>
                      <div class="item">
                        <img src="http://placehold.it/450x350" alt="Slide 3">
                        <div class="carousel-caption">
                          Caption Slide 3
                        </div>
                      </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>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

如何匹配bootstrap轮播到div高度？

1 个答案: