如何创建 Bootstrap 列而不 padding/margin 是屏幕大小的一半？

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 class 没有样式。那是你行的一半。应该是50%；所以，

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

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

在这里分叉

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

如何创建 Bootstrap 列而不 padding/margin 是屏幕大小的一半？

How to create Bootstrap columns without padding/margin that are half the screen-size?

html

css

twitter-bootstrap

margin