引導列不填充/保證金

我想從這個網站實現對一個類似的效果： 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

引導列不填充/保證金

回答

相關問題