は、画像の下のブートストラップ

Question

をdiv要素を追加するためにどのように私はそれが縮小または拡大されているように、画像に応答する画像の下のdivを追加します。私は画像の下にdivを追加しようとしましたが、画像の拡大縮小には反応しません。

これは私が使用しているコードです：あなたは、それはこのように

#books_div { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 25%; 
 
    transform: translatex(-50%); 
 
} 
 

 
#books_text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 15%; 
 
    transform: translatex(-50%); 
 
} 
 

 
#books_div img { 
 
    margin-bottom: 20px !important; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Books --> 
 
    <h2 id='books_text'> We Giveaway Free Books </h2> 
 
    <div class="row" id='books_div'> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-md-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    <!-- End of Books -->

Answer 1

たいですか？どのように私はこのような何かを成し遂げるだろうか私はちょうど、descriptionと呼ばれる新しいdivを追加margin-bottom: 20px !importantを削除し、それdescriptionを与えました。

あなたの親のdivがwidth of parent > image widthのような幅を持っている場合、div要素は親widthを持っていることを覚えておいてください。

更新：

私は.descriptionにmax-width: 200pxを追加しました。

#books_div { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 25%; 
 
    transform: translatex(-50%); 
 
} 
 

 
#books_text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 15%; 
 
    transform: translatex(-50%); 
 
} 
 

 
/* 
 
#books_div img { 
 
    margin-bottom: 20px !important; 
 
} 
 
*/ 
 

 
.description { 
 
    background-color: red; 
 
    margin-bottom: 20px; 
 
    max-width: 200px; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Books --> 
 
    <h2 id='books_text'> We Giveaway Free Books </h2> 
 
    <div class="row" id='books_div'> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
       <div class="description">test</div> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
       <div class="description">test</div> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
       <div class="description">test</div> 
 
      </div> 
 
      <div class="col-lg-3 col-md-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
       <div class="description">test</div> 
 
      </div> 
 
     </div> 
 
    <!-- End of Books -->

Answer 2

以下のコードを参照してください。 タグの内部にdivを書き込むだけです。

#books_div { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 25%; 
 
    transform: translatex(-50%); 
 
} 
 

 
#books_text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 15%; 
 
    transform: translatex(-50%); 
 
} 
 

 

 
#name { 
 
    background-color: #aaa; 
 
    margin-bottom: 20px !important; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Books --> 
 
    <h2 id='books_text'> We Giveaway Free Books </h2> 
 
    <div class="row" id='books_div'> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt="" style="width:200px;height:276px;"> 
 
        <div class="name">Book Name</div> 
 
       </a> 
 
      
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;"> 
 
        <div class="name">Book Name</div> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;"> 
 
        <div class="name">Book Name</div> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-md-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;"> 
 
        <div class="name">Book Name</div> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    <!-- End of Books -->

Answer 3

私はあなたの必要を受ける場合、これは、許容可能なアプローチが考えられます。

あなたが親としてコンテナ（DIV）を設定する必要があり、それは絶対的な幅を定義します。その後、それはそのあなたが必要なneeddedで設定できる2人の子供（画像と説明）、持っています：

<div class="col-lg-3 col-sm-6 portfolio-item"> 
    <div style="width:100%;"><a href="#"> 
     <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt="" style="width:200px;height:276px;"> 
    </a> 
    </div> 
    <div style="width:100%; background-color:red;" class="description">test</div> 
</div> 

は、 - 私は自分のhtmlタグにCSSスタイルを設定し実現し、あなたが作成したり、それらを設定することができますCssクラスで。

ことができます願って。ご不明な点がございましたら、お知らせください。