Question

我正在努力实现与此网络相似的效果： 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;
}

感谢

Answer 1

不确定。你的.col-lg-6课程没有造型。这是你行的一半。它应该是50％; 所以，

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

然后，视频元素应该是一个块，这样你就可以摆脱annyong较低的空白（如果它不是一个块，就像这里的img元素一样）。一切都准备好了，虽然我原来的代码中还有一些我不知道的东西。

在这里分叉

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

没有填充/边距的Bootstrap列

1 个答案: