引导列不填充/保证金

我想从这个网站实现对一个类似的效果： http://planilandia.com/index(en).html 引导列不填充/保证金

只是采取在视频一看 - 他们是屏幕的50％，再加上没有边界，保证金或填充在他们之间。我试图做到这一点，但没有成功。这是我的小提琴：

什么，我做错了什么？

这是代码：

<div class="container section-movies"> 

     <div class="row row-no-padding movies-player"> 
      <div class="col-lg-6"> 
       <video controls class="home-video" poster="img/movies/about-us-poster.jpg" loop="true" preload="auto"> 
           <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" /> 
       </video> 
      </div> 
      <div class="col-lg-6"> 
       <video controls class="home-video" poster="img/movies/projects-poster.jpg" loop="true" preload="auto"> 
           <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" /> 
       </video>       
      </div> 
      </div> 

      <div class="row row-no-padding movies-player"> 
      <div class="col-lg-6"> 
          <video controls class="home-video" poster="img/movies/contact-poster.jpg" loop="true" preload="auto"> 
           <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" /> 
          </video> 
      </div> 
      <div class="col-lg-6"> 
          <video controls class="home-video" poster="img/movies/made-by-us-poster.jpg" loop="true" preload="auto"> 
           <source src="https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4" type="video/mp4" /> 
          </video> 
      </div>   
     </div> 
    </div><! --/container -->

和CSS：

.movies-player div { 
    padding:0; 
    margin:0; 
    border:0; 
    overflow:hidden; 
} 

.home-video { 
    background-size: 100% 100%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
} 

::-webkit-media-controls { 
    display:none !important; 
} 

.row-no-padding { 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
    padding-top:0 !important; 
    padding-bottom:0 !imprtant; 
    border:0!important; 
    } 

.section-movies { 
    width:100%; 
} 

.section-movies .row { 
    text-align:center; 
} 

.section-movies .row div video { 
    width:100%; 
    margin:0; 
    padding:0; 
}

感谢

来源

2015-04-04 Paweł Skaba

肯定。没有你的.col-lg-6课程的样式。这是你行的一半。应该是50％; 所以，

.col-lg-6 { 
width: 50%; 
float:left; 
}

然后，视频元素应该是一个块，所以你能摆脱annyong低空白（的行为像一个img元素在这里，如果它不是一个块）。设置了一切，虽然有些东西我不知道从您的原始代码。

这里分叉

http://jsfiddle.net/7kb9nfhn/2/

来源

2015-04-04 23:24:51 designarti

谢谢！还有一个问题 - 就像你会看到在列之间有一个小的（大约1px）的行。它是bootstrap，视频还是什么的错？ – 2015-04-05 05:16:47

我没有看到这里的像素。从头开始准确实现您所需要的时间需要时间。并且有调试。如果你想让它看起来像你的例子，为什么你不尝试复制它？只是将正确的属性添加到您的CSS类和ID。而我们没有你的整个网站，只是一些CSS和HTML。这也可能是一个错误。 – designarti 2015-04-05 11:21:08

引导列不填充/保证金

回答

相关问题