Question

我一直在使用this帖子中的代码将两张图片（fbook图标和横幅）放在主海报图片的顶部。这是代码在我的引导索引文件中的样子：

   <div class="container">
      <div class="row">

         <div class="col-sm-4">

         </div>

         <div class="col-xs-12 col-sm-4">

            <div style="position: relative; left: 0; top: 0;">
              <img class="poster center-block" src="images/poster.png" style="position: relative;"/>
               <a href="https://www.facebook.com/" target="_blank">
                  <img class="fbook" alt="Facebook!" src="images/fbook.png"/>
               </a>
               <a href="http://www.yo.com/" target="_blank">
                  <img class="banner" alt="Yo!" src="images/banner.png"/>
               </a>
            </div>

         </div>

         <div class="col-sm-4">

         </div>

      </div>
 </div>

这是当前的css：

img.poster {
    position: relative; 
    padding-top: 5px;
    max-width: 250px;
}

img.fbook {
    padding-top: 25px;
    max-width: 65px;
    position: absolute;       

    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Chrome, Safari, Opera */
    transform: rotate(-3deg);
}

img.banner {
    padding-top: 25px;
    max-width: 235px;

    position: absolute;       
}

两个图像保持不变，直到列折叠在.col-sm- / 768px处。从768px开始，两个图像将使用col-xs-12边框进行对齐，并将它们放置在主海报图像的最左侧。主海报图像位于col-xs-12宽度中间的中心块类中。

似乎col-sm-4将在主海报图像周围对齐，因此顶部的其他两个图像使用此列边框以对齐自己。当clumn折叠到col-xs-12时，左边的clomun边框将被放置在左边。

当使用col-xs-4时，同样的事情发生..

我想找到一种方法将两张图像放在主海报图像的顶部，这样当窗口调整大小并且列折叠时它们将保持原位。

更新 - 解决方案：

的CSS：

.columnWidth {
    width: 33.33333333%;
    margin-left: 5%;

}

HTML：

<div class="col-sx-12 col-sm-4 columnWidth">

Bootstrap 3 - 在调整大小时在图像顶部

0 个答案: