html - 如何创建没有屏幕大小一半的填充/边距的 Bootstrap 列？

Question

我正在尝试实现与该网站类似的效果: http://planilandia.com/index(en).html

它们占屏幕的 50%，并且它们之间没有边框、边距或填充。我试图实现这一目标，但没有成功。

我做错了什么？

.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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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 -->

这是我的 fiddle :

http://jsfiddle.net/uceder23/3/

Answer 1

当然。您的 .col-lg-6 类没有样式。那是你行的一半。应该是50%；所以，

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

然后，video 元素应该是一个 block ，这样您就可以去掉 annyong 下部空白(如果它不是一个 block ，这里就像一个 img 元素)。一切就绪，尽管有些东西我不知道你的原始代码。

在这里 fork

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