ウェブサイトのセクションにすべてのボタンを表示してスタイルを設定する

Question

コンテンツをダウンロードして編集してウェブサイトを作成する方法を学んでいます。

ホームページにショップのすべての店舗の画像を示すセクションを作成しました。ホームページに3店舗の画像を表示して、をご覧ください。ボタンを右下に表示してください。

私は多くの方法を試しましたが、良い方法でやり遂げることはできません。以下は

HTMLコード：

<!-- OUR STORES Section --> 
<section id="stores" class="bg-light-gray"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2 class="section-heading">Our Stores</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4 col-sm-6 portfolio-item"> 
       <a href="#storeModal1" class="store-link" data-toggle="modal"> 
        <div class="store-hover"> 
         <div class="store-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/store/store01.png" class="img-responsive" alt=""> 
       </a> 
       <div class="store-caption"> 
        <h4>Store 01</h4> 
        <p class="text-muted">Location 01</p> 
       </div> 
      </div> 
      <div class="col-md-4 col-sm-6 store-item"> 
       <a href="#storeModal2" class="store-link" data-toggle="modal"> 
        <div class="store-hover"> 
         <div class="store-hover-content"> 
          <i class="fa fa-plus fa-3x"></i> 
         </div> 
        </div> 
        <img src="img/store/store02.png" class="img-responsive" alt=""> 
       </a> 
       <div class="store-caption"> 
        <h4>Store 02</h4> 
        <p class="text-muted">Location 02</p> 
       </div> 
      </div>    
     </div> 
    </div> 
</section> 

Answer 1

ちょうどボタンで右に整列新しい行、テキストを追加しないのはなぜ？

他の応答を参照してください。これは、HTMLボタンを追加する方法のみを示していますが、JavaScriptのJavaScriptは追加しません。

<!-- OUR STORES Section --> 
 
<section id="stores" class="bg-light-gray"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-12 text-center"> 
 
       <h2 class="section-heading">Our Stores</h2> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-4 col-sm-6 portfolio-item"> 
 
       <a href="#storeModal1" class="store-link" data-toggle="modal"> 
 
        <div class="store-hover"> 
 
         <div class="store-hover-content"> 
 
          <i class="fa fa-plus fa-3x"></i> 
 
         </div> 
 
        </div> 
 
        <img src="img/store/store01.png" class="img-responsive" alt=""> 
 
       </a> 
 
       <div class="store-caption"> 
 
        <h4>Store 01</h4> 
 
        <p class="text-muted">Location 01</p> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4 col-sm-6 store-item"> 
 
       <a href="#storeModal2" class="store-link" data-toggle="modal"> 
 
        <div class="store-hover"> 
 
         <div class="store-hover-content"> 
 
          <i class="fa fa-plus fa-3x"></i> 
 
         </div> 
 
        </div> 
 
        <img src="img/store/store02.png" class="img-responsive" alt=""> 
 
       </a> 
 
       <div class="store-caption"> 
 
        <h4>Store 02</h4> 
 
        <p class="text-muted">Location 02</p> 
 
       </div> 
 
      </div>    
 
     </div> 
 

 
     <!-- HERE --> 
 
     <div class="row"> 
 
      <div class="col-md-12 text-right"> 
 
      <button class="btn btn-primary">View All</button> 
 
      </div> 
 
     \t </div> 
 

 
    </div> 
 
</section>

Answer 2

ます（それぞれすでにHTMLファイルでそれらを持っている）非同期的にそれらをロードしたくない場合は、CSS display:noneに隠しよう設定されているのdiv、にそれらをラップすることができます

次に、Javascriptが必要で、クリック時にDOMのやりとりを処理するイベントを作成する必要があります。

私はCSSとjQuery（Javascriptのフレームワーク）であなたのために少しのサンプルを作った：私はそれが役に立てば幸い https://jsfiddle.net/ta53jfwo/

！