必要な画像一緒に触れる、げっ歯類なし

Question

ちょっとStackOverFlowコミュニティ、

私はこれらの画像を一緒に触れる必要があります。彼らは結局はるかに大きくなり、ブラウザの端に触れます。これらは、フィルムワークの例につながるタイルであり、現在はプレースホルダー画像を持っています。私はここでは0

しようとしましたが、これらの画像は触れて取得しようとしたが、私は何が起こっているかわからないんだけど...マージンとパディングを設定している

はコードです。

HTML

<section id="video-section" class="portfolio"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-10 col-lg-offset-1 text-center"> 
       <h2>Video Production</h2> 
       <hr class="small"> 
      </div> 
      <div class="container-fluid full-width has-inner"> 
       <div class="row row-no-gutter"> 
        <div class="col-md-4 nogut"> 
         <div id="image1" class="video-item"> 
          <a href="https://vimeo.com/208403633"> 
           <img id="portfolio1" class="img-full-width" src="img/image1.jpg"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-4 nogut"> 
         <div id="image2" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image2.jpg"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-4 nogut"> 
         <div id="image3" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image3.jpg"> 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="row row-no-gutter"> 
        <div class="col-md-4"> 
         <div id="image4" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image4.jpg"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div id="image5" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image5.jpg"> 
          </a> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div id ="image6" class="video-item"> 
          <a href="#"> 
           <img class="img-full-width" src="img/image6.jpg"> 
          </a> 
         </div> 
        </div> 

       </div> 
       <!-- /.row (nested) --> 
      </div> 
      <!-- /.container-fluid --> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 
</section> 

CSS

#video-section { 
padding: 10px; 
    background: #353030; 
    color: white; 
} 

.containter-fluid .full-width { 
    padding-left: 0px; 
    padding-right: 0px; 
    overflow-x: hidden; 
} 

.row .row-no-gutter { 
    margin: 0px; 
    padding: 0px; 
} 

.nogut { 
    margin: 0px; 
} 

.img-full-width { 
    width: 100.5%; 
    height: auto; 
} 

は私が間違って何をやっている、これを理解しようとしているいくつかの時間を費やしされていますか？

Answer 1

パディングは行にはなく列にあります。あなたが動作しません:)あなたは、ほぼ正しい答えを持っていた

.nogutよう は、そして、それは、余裕はありませんが、これを試してみてください。

.no-gutter > [class*='col-'] { 
    padding-right:0; 
    padding-left:0; 
} 

を次に、あなたのhtmlで：

<div class="row no-gutter"> 

Answer 2

まず、ブラウザで右クリックしてinspectを使用してください（私はこれがChromeで一番良いと思います）。このアイコンをクリックしてください。 画像の上にカーソルを置くと、ギャップがどの要素に属しているかを見ることができます。要素をクリックすると、スタイルセクションでさまざまなCSSプロパティを解除（および追加）し、何が起こるかを確認できます。非常に強力なツールです。

あなたには、パディングを追加することをおすすめします：0px; .nogotにそのクラスを2行目にも追加します。