overflow-x 不适用于我的第二个 div，因为我正在 bootstrap 中制作带缩略图的滑块

Question

我想使第二个 div overflow-x 滚动，但它不起作用

  #image_view a img{
 height: 400px;
 width: 600px;
 margin: auto;
 text-align: center;
 padding-bottom: 10px;}
    #thumbnail{
    height: 120px;
 overflow-x: scroll;
    display: inline;
    }
    #thumbnail img{
 height: 100px;
 width: 100px;
 margin: auto;
 padding-bottom: 10px;
 white-space: nowrap;}

<div class=" col-lg-12 jumbotron">
    <div class="col-lg-10" id="image_view">
     <a href="#"><img src="images/1.jpg" alt="image view"></a>
    </div>

    <div class="col-lg-12" id="thumbnail">
     
     <img src="images/10.jpg" alt="image">
     <img src="images/11.jpg" alt="image">
     <img src="images/3.jpg" alt="image">
     <img src="images/4.jpg" alt="image">
     <img src="images/5.jpg" alt="image">
     <img src="images/6.jpg" alt="image">
     
                </div> 
</div>

Answer 1

我猜你想要这样的东西 > Jsfiddle 或下面的片段

将 white-space:nowrap 添加到 #thumbnail 而不是图像，它应该可以工作

如果这是您想要的，请告诉我。

#image_view a img{
height: 400px;
width: 600px;
margin: auto;
text-align: center;
padding-bottom: 10px;}
#thumbnail{
height: 120px;
overflow-x: scroll;
display: inline;
 white-space: nowrap;
}

#thumbnail img {
  height: 100px;
width: 100px;
margin: auto;
padding-bottom: 10px;
}

<div class=" col-lg-12 jumbotron">
    <div class="col-lg-10" id="image_view">
     <a href="#"><img src="images/1.jpg" alt="image view"></a>
    </div>

    <div class="col-lg-12" id="thumbnail">
     
     <img src="images/10.jpg" alt="image">
     <img src="images/11.jpg" alt="image">
     <img src="images/3.jpg" alt="image">
     <img src="images/4.jpg" alt="image">
     <img src="images/5.jpg" alt="image">
     <img src="images/6.jpg" alt="image">
     
    </div>
  </div>

overflow-x 不适用于我的第二个 div，因为我正在 bootstrap 中制作带缩略图的滑块

overflow-x is not working with my second div as i am making slider with thumbnails in bootstrap

html

css

overflow