1. ホーム
  2. 質問と答え
  3. ブートストラップモーダルでイメージの行を作る方法

ブートストラップモーダルでイメージの行を作る方法

2017-03-14 5 views
2

ブートストラップモーダルの本体に、その上にあるタイトルの行を3〜5行作成しようとしています。私は何度も試してみましたが、なぜうまくいかないのか分かりません...これは私が作業しているコードです。ブートストラップモーダルでイメージの行を作る方法

画像はインラインで表示されず、重ねて表示されます。私は彼らにメインビデオの下に一列にレイアウトしてほしい。

<!-- Modal --> 
 
<div class="modal fade bs-example-modal-lg" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModal"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title tut-title" id="tutorialModal"></h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <iframe class="tut-vid" width="865" height="480" src="" allowfullscreen></iframe> 
 
     <!-- Original Ratio Scaled to width="853" height="480" --> 
 
     <p class="Pack-Quote"> 
 
      <!-- Enter Tutorial Description here. (If suitable) --> 
 
     </p> 
 

 
     </div> 
 
     <!-- Try making these buttons control the Prev. and Next buttons for the Youtube playlist the current video is in --> 
 
     <div class="modal-footer"> 
 

 
     <!-- This section will be used as a "Suggested Video Display" showing multiple thumbnails that are relatable to the video, or have been manually added. --> 
 

 
     <div class="row"> 
 

 
      <div class "col-xs-6 col-md-3"> 
 
      <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
       <h5>Tutorial</h5> 
 
       <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
      </a> 
 
      </div> 
 

 
      <div class "col-xs-6 col-md-3"> 
 
      <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
       <h5>Tutorial</h5> 
 
       <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
      </a> 
 
      </div> 
 

 
      <div class "col-xs-6 col-md-3"> 
 
      <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
       <h5>Tutorial</h5> 
 
       <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
      </a> 
 
      </div> 
 

 
      <div class "col-xs-6 col-md-3"> 
 
      <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
       <h5>Tutorial</h5> 
 
       <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
      </a> 
 
      </div> 
 

 
     </div> 
 

 
     <a href="#" class="btn btn-primary align-left" role="button"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Previous Tutorial</a> 
 
     <a href="#" class="btn btn-primary align-right" role="button">Next Tutorial<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a> 
 
     <div style="clear: both;"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-03-14 Jake

+0

12月6日= 2及び12/3 = 4 :) SO 2または4の画像 –

+0

任意の組み合わせが動作する必要があり、3枚の==画像のための余地を提供するために12/4を言います。 – Jake

答えて

0

[OK]を何が起こったのかを教え、その後、各1でこれを行うために試してみて、 divの後に=を追加しない各列divのクラス。

この目的のコードは、次のコードでは、ブートストラップモーダル内で4つのサムネイルの行になります。モーダルの<div class="modal-header">、<div class="modal-body">または<div class="modal-footer">の中に次のコードを挿入して、コンテンツが正しく表示されるようにします。

<div class="container-fluid"> 
<div class="row"> 

    <div class="col-xs-6 col-md-3"> 
     <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
      <h5>Tutorial</h5> 
      <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
     </a> 
    </div> 

    <div class="col-xs-6 col-md-3"> 
     <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
      <h5>Tutorial</h5> 
      <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
     </a> 
    </div> 

    <div class="col-xs-6 col-md-3"> 
     <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
      <h5>Tutorial</h5> 
      <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
     </a> 
    </div> 

    <div class="col-xs-6 col-md-3"> 
     <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
      <h5>Tutorial</h5> 
      <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
     </a> 
    </div> 

</div>

あなたが望むすべてが画像の行である場合は、単に次のように各列に置き換えます。

<div class="col-xs-6 col-md-3"> 
    <img src="Your image URL goes here" alt="Visual impared Text goes here"> 
</div>

出典

2017-03-15 08:30:39 Jake

+1

idsはページ上でユニークでなければなりません:) –

+0

これは実際にはプレース・フィラーIDです。たとえば、それぞれのチュートリアルのサムネイルとリンクがその位置に表示されていることによって、それぞれが異なることになります。 – Jake

0

ので、私はで愚かなミスを犯した

<div class "col-xs-6 col-md-3" style="float:left;"> 
     <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
     <h5>Tutorial</h5> 
     <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
     </a> 
    </div>

出典

2017-03-14 11:43:43

+0

この方法は機能しますが、全体的に小さくなります。 – Jake

0 

<div class="modal fade bs-example-modal-lg" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModal"> 
 
     <div class="modal-dialog modal-lg" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
      <h4 class="modal-title tut-title" id="tutorialModal"></h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <iframe class="tut-vid" width="865" height="480" src="" allowfullscreen></iframe> 
 
      <!-- Original Ratio Scaled to width="853" height="480" --> 
 
      <p class="Pack-Quote"> 
 
       <!-- Enter Tutorial Description here. (If suitable) --> 
 
      </p> 
 

 
      </div> 
 
      <!-- Try making these buttons control the Prev. and Next buttons for the Youtube playlist the current video is in --> 
 
      <div class="modal-footer"> 
 

 
      <!-- This section will be used as a "Suggested Video Display" showing multiple thumbnails that are relatable to the video, or have been manually added. --> 
 

 
      <div class="row"> 
 

 
       <div class = "col-xs-3" style="float:left;"> 
 
       <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
        <h5>Tutorial</h5> 
 
        <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
       </a> 
 
       </div> 
 

 
       <div class = "col-xs-3" style="float:left;"> 
 
       <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
        <h5>Tutorial</h5> 
 
        <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
       </a> 
 
       </div> 
 

 
       <div class = "col-xs-3" style="float:left;"> 
 
       <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
        <h5>Tutorial</h5> 
 
        <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
       </a> 
 
       </div> 
 

 
       <div class = "col-xs-3" style="float:left;"> 
 
       <a class="thumbnail" id="TutorialID" href="#" data-toggle="modal" data-target="#tutorialModal" data-title="Tutorial Title" data-video="Youtube Video Embed Here..."> 
 
        <h5>Tutorial</h5> 
 
        <img src="https://img.you|tube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg" alt="147x110"> 
 
       </a> 
 
       </div> 
 

 
      </div> 
 

 
      <a href="#" class="btn btn-primary align-left" role="button"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Previous Tutorial</a> 
 
      <a href="#" class="btn btn-primary align-right" role="button">Next Tutorial<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a> 
 
      <div style="clear: both;"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

出典

2017-03-14 11:47:40

+0

私はそれを編集してください今すぐチェックしてください –

関連する問題

 関連する問題