Question

我有div，里面有一些图片。这是我的HTML代码：

<div id="slide-menu-list" class="row">
    <a href="home.html"><img class="img-responsive" src="img/icon_menu1a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu2a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu3a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu4a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu5a.png" /></a>
</div>

这里是css：

#slide-menu-list{
   position:fixed;
   bottom:0px; 
   left:0px;
}

但是图像从上到下堆叠。如何使用Twitter Bootstrap从左到右堆叠图像？

Answer 1

使用左拉类，并指定图像的宽度

以下代码

    <div id="slide-menu-list" class="row">
        <a href="home.html"><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
    </div>

    <style>
    img
    {
         width:20%;
    }

    #slide-menu-list
    {
         position:fixed;
    }
    </style>

如果您希望将图像固定在页面中，请在复杂的解决方案中使用affix bootstrap Affix

Answer 2

您需要添加宽度：100％;在＃slide-menu-list div中

#slide-menu-list{
   position:fixed;
   width:100%;
}

然后

#slide-menu-list a img{
    display:block;
    float:left;
    width:25%;
}

使用Bootstrap从左到右定位图像

2 个答案: