コンテナ内にdivが表示されるようにするには、幅が100％の場合

Question

コンテナ内のdivをBootstrapと揃えるのに少し問題があります。

私がしようとしているのは、divをコンテナの幅の内側に広げることです。

これはコンテナの左側にありますが、右側にはありません。オフスクリーンになります。

HTML：

<!-- Image With Action Section --> 
    <section class="special_section"> 
     <div class="container-fluid" style="max-height: 25%"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <div class="caption-2"> 
         <img src="background-image-url" class="img-full-width img-responsive" alt="" /> 
         <div class="container"> 
          <div class="action-footer"> 
           <div class="col-sm-10"> 
            <h4 class="caption-text">Title</h4> 
           </div> 
           <div class="col-sm-2"> 
            Link 
           </div> 
          </div> 
          <div class="caption"> 
           <h4>Title</h4> 
           <p>Content</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

CSS：

.caption-2 .action-footer { 
    margin: -1px 0 0 0; 
    padding: 10px; 
    font-size: 15px; 
} 
@media (min-width:500px) { 
    .caption-2 .action-footer { 
     margin:0; 
     position: absolute; 
     bottom: 0; 
     height: 10%; 
     width: 100%; 
    } 
} 

.action-footer .col-md-12 { 
    margin-top: -10px; 
} 

.action-footer divが、私は親コンテナ内の100％の幅である必要は1です。代わりに、それはあまりにも多くの幅を取得します。

Answer 1

CSSプロパティを適用する必要がありますへ

@media (min-width:500px) { 
    .caption-2 .action-footer { 
     margin:0; 
     position: absolute; 
     bottom: 0; 
     height: 10%; 
     width: 100%; 
    } 
} 

変更して：あなたは携帯電話のためにこれを構築している心の中で持ってposition: relative;、それは仕事をする必要があります。 コンテナ流体を使用するたびに、ほとんどの要素は相対の位置を持ち、画面の幅と再整列することができます。それは常に体の左から開始して

Answer 2

あなたはあなたが主な問題はここに実際にあるよbox-sizing: border-box;

.action-footer { 
    box-sizing: border-box; 
} 

Answer 3

ただ、望ましい結果を得るためにcontainerとaction-footerの順序を交換もation-footerにleft:0pxを追加しました。ここで

@media (min-width:500px) { 
    .caption-2 .action-footer { 
    margin: 0; 
    position: absolute; 
    bottom: 0; 
    height: 10%; 
    width: 100%; 
    left:0px; 
    } 
} 

作業コードです：

.caption-2 .action-footer { 
 
    margin: -1px 0 0 0; 
 
    padding: 10px; 
 
    font-size: 15px; 
 
} 
 

 
@media (min-width:500px) { 
 
    .caption-2 .action-footer { 
 
    margin: 0; 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 10%; 
 
    width: 100%; 
 
    left:0px; 
 
    } 
 
} 
 

 
.action-footer .col-md-12 { 
 
    margin-top: -10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="special_section"> 
 
    <div class="container-fluid" style="max-height: 25%"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     <div class="caption-2"> 
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="img-full-width img-responsive" alt="" /> 
 
      <div class="action-footer"> 
 
      <div class="container"> 
 
       <div class="col-sm-10"> 
 
       <h4 class="caption-text">Title</h4> 
 
       </div> 
 
       <div class="col-sm-2"> 
 
       Link 
 
       </div> 
 
      </div> 
 
      <div class="container"> 
 
      <div class="caption"> 
 
       <h4>Title</h4> 
 
       <p>Content</p> 
 
      </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>