1. ホーム
  2. 質問と答え
  3. col-md-4 col-sm-6 col-xs-12でこれらのテーブルを応答させる必要があるため、私のコードが動作しません。

col-md-4 col-sm-6 col-xs-12でこれらのテーブルを応答させる必要があるため、私のコードが動作しません。

2017-12-28 10 views
-4

col-md-4 col-sm-6 col -xs-12 col-lgそれを反応させるために私を助けてください。それは正しく働いていない。私の反応するコードは動作していません。すべての画面で同じ結果が表示されます.Default bootstrapクラスは動作しません。私はit.instaed divを使用することができます。私はtables.Myコードで動作する必要がありますcol md -4 col-sm-6 col-xs-12 col-lgそれを反応させるのを助けてください。col-md-4 col-sm-6 col-xs-12でこれらのテーブルを応答させる必要があるため、私のコードが動作しません。

テーブル部の Official Bootstrap Websiteで 
<div class="row text-center"> 
    <table class="responsive table"> 
     <tr class="container"> 
     <!-- child table 1 starts --> 
      <td class="row responsive table"> 
       <table class="col-xs-12 col-sm-6"> 
        <tbody class="logo-box"> 
         <tr class="table winning-nbr-box winning-nbr"> 
          <td class="winning-logo text-center"> 
           <a href="https://www.lotterycorner.com/oh/pick-3-midday"> 
            <img src="./Ohio (OH) Lottery Results - Latest Winning numbers_files/oh-pick3.png" alt="Ohio Pick 3 Midday Winning numbers" style="margin-top:40px;"> 
           </a> 
           <p class="winning-inner"> 
            <p class="sort-text" style="border-bottom: 0px solid #fff;"> 
             <h3 style="font-size: 23px; color: #000; font-weight: 700; text-align:justify; padding:2px 20px; margin-top:-18px;"> 
             Pick 3 Midday 
             </h3> 
             <p class="upper-c-text" style="text-align:justify; padding:2px 20px; margin-top:-1px; color:#616161; font-size:14px;">Wednesday, December 20, 2017 Winning Number</p> 
             <ul class="nbr-grp"> 
              <li> 8 </li> 
              <li> 7 </li> 
              <li> 3 </li> 
             </ul> 
             <span class="upper-c-text next" style="color:#616161;"> 
              <strong>Top Prize/ Jackpot</strong> 
             </span> 
             <br> 
             <span class="current" style="color:#616161; font-size:20px;">$500</span> 
             <p style="border:1px solid #ddd"></p> 
             <p class="box-btm-part"> 
              <span style="color:#172d48;">Next Draw at : Thu, Dec-21-2017, 12:29 PM (US/Eastern) 
              </span> 
              <br> 
              <span class="upper-c-text next" style="font-size:18px; line-height:24px;font-family: 'Neris-Light',sans-serif; color:#172d48;"> 
              <strong>Next Jackpot</strong> 
              </span> 
              <br> 
              <span class="price next" style="color:#172d48; font-size:26px;"> 
               <strong>$500</strong> 
              </span> 
             </p> 
             <p> 
              <a href="https://www.lotterycorner.com/oh/pick-3-midday" class="result-btn">&nbsp;&#10095;&nbsp;&nbsp; Find Out More&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> 
             </p> 
            </p> 
           </p> 
          </td> 
         </tr> 
        </tbody>  
       </table> 
      </td> 
      <!-- child table 1 ends --> 
      <!-- child table 2 starts --> 
      <td class="row responsive table"> 
       <table class="col-xs-12 col-sm-6"> 
        <tbody class="logo-box"> 
         <tr class="table winning-nbr-box winning-nbr"> 
          <td class="winning-logo text-center"> 
           <a href="https://www.lotterycorner.com/oh/pick-3-evening"> 
            <img src="./Ohio (OH) Lottery Results - Latest Winning numbers_files/oh-pick3.png" alt="Ohio Pick 3 Evening Winning numbers" style="margin-top:40px;"> 
           </a> 
           <p class="winning-inner"> 
            <p class="sort-text" style="border-bottom: 0px solid #fff;"> 
             <h3 style="font-size: 23px; color: #000; font-weight: 700; text-align:justify; padding:2px 20px; margin-top:-18px;"> 
              Pick 3 Evening 
             </h3> 
             <p class="upper-c-text" style="text-align:justify; padding:2px 20px; margin-top:-1px; color:#616161; font-size:14px;">Wednesday, December 20, 2017 Winning Number</p> 
             <ul class="nbr-grp"> 
              <li> 1 </li> 
              <li> 6 </li> 
              <li> 6 </li> 
             </ul> 
             <span class="upper-c-text next" style="color:#616161;"> 
              <strong>Top Prize/ Jackpot</strong> 
             </span> 
             <br> 
             <span class="current" style="color:#616161; font-size:20px;">$500</span> 
             <p style="border:1px solid #ddd"></p> 
             <p class="box-btm-part"> 
              <span style="color:#172d48;">Next Draw at : Thu, Dec-21-2017, 07:29 PM (US/Eastern) 
              </span> 
              <br> 
              <span class="upper-c-text next" style="font-size:18px; line-height:24px;font-family: 'Neris-Light',sans-serif; color:#172d48;"> 
               <strong>Next Jackpot</strong> 
              </span> 
              <br> 
              <span class="price next" style="color:#172d48; font-size:26px;"> 
               <strong>$500</strong> 
              </span> 
             </p> 
             <p> 
              <a href="https://www.lotterycorner.com/oh/pick-3-evening" class="result-btn">&nbsp;&#10095;&nbsp;&nbsp; Find Out More&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> 
             </p> 
            </p> 
           </p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <!-- child table 2 ends --> 
      <!-- child table 3 starts --> 
      <td class="row responsive table"> 
       <table class="col-xs-12 col-sm-6"> 
        <tbody class="logo-box"> 
         <tr class="table winning-nbr-box winning-nbr"> 
          <td class="winning-logo text-center"> 
           <a href="https://www.lotterycorner.com/oh/pick-4-midday"> 
            <img src="./Ohio (OH) Lottery Results - Latest Winning numbers_files/oh-pick4.png" alt="Ohio Pick 4 Midday Winning numbers" style="margin-top:40px;"> 
           </a> 
           <p class="winning-inner"> 
            <p class="sort-text" style="border-bottom: 0px solid #fff;"> 
             <h3 style="font-size: 23px; color: #000; font-weight: 700; text-align:justify; padding:2px 20px; margin-top:-18px;"> 
              Pick 4 Midday 
             </h3> 
             <p class="upper-c-text" style="text-align:justify; padding:2px 20px; margin-top:-1px; color:#616161; font-size:14px;">Wednesday, December 20, 2017 Winning Number</p> 
             <ul class="nbr-grp"> 
              <li> 6 </li> 
              <li> 1 </li> 
              <li> 3 </li> 
              <li> 5 </li> 
             </ul> 
             <span class="upper-c-text next" style="color:#616161;"> 
              <strong>Top Prize/ Jackpot</strong> 
             </span> 
             <br> 
             <span class="current" style="color:#616161; font-size:20px;">$500</span> 
             <p style="border:1px solid #ddd"></p> 
             <p class="box-btm-part"> 
              <span style="color:#172d48;">Next Draw at : Thu, Dec-21-2017, 12:29 PM (US/Eastern) 
              </span> 
              <br> 
              <span class="upper-c-text next" style="font-size:18px; line-height:24px;font-family: 'Neris-Light',sans-serif; color:#172d48;"> 
               <strong>Next Jackpot</strong> 
              </span> 
              <br> 
              <span class="price next" style="color:#172d48; font-size:26px;"> 
               <strong>$5,000</strong> 
              </span> 
             </p> 
             <p> 
              <a href="https://www.lotterycorner.com/oh/pick-4-midday" class="result-btn">&nbsp;&#10095;&nbsp;&nbsp; Find Out More&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> 
             </p> 
            </p> 
           </p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <!--child table3 ends--> 
     </tr> 
    </table> 
</div>

出典

2017-12-28 Nidhi Mahajan

+1

あなたの "応答コード" とは何ですか？あなたは何を達成しようとしていますか？実際に何が起こっていますか？ –

答えて

0

正確に、彼らは言った：

応答テーブル

は768pxの下で（彼らは小さなデバイス上で水平方向にスクロールさせるために.table-responsiveで任意の.tableをラップすることにより、応答性のテーブルを作成します。 ）。幅が768pxを超えるものを見ると、これらの表に違いは見られません。

はそのため.responsive.tableと呼ばれる全くクラス、

もちょうど.table-responsiveを保持するコンテナとテーブルをラップ応答ブートストラップ・テーブルを達成するために、グリッドユーティリティを使用し、それを.row、.colクラスを削除する必要はありませんありません応答する必要があります。

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="table-responsive"> 
 
    <table class="table text-center"> 
 
     <tr class="container"> 
 
      <!-- child table 1 starts --> 
 
      <td class="table-responsive"> 
 
       <table class="table"> 
 
        <tbody class="logo-box"> 
 
         <tr class="table winning-nbr-box winning-nbr"> 
 

 
          <td class="winning-logo text-center"> 
 
           <a href="https://www.lotterycorner.com/oh/pick-3-midday"> 
 
             <img src="./Ohio (OH) Lottery Results - Latest Winning numbers_files/oh-pick3.png" alt="Ohio Pick 3 Midday Winning numbers" 
 
              style="margin-top:40px;"> 
 
            </a> 
 
           <p class="winning-inner"> 
 
            <p class="sort-text" style="border-bottom: 0px solid #fff;"> 
 
             <h3 style="font-size: 23px; color: #000; font-weight: 700; text-align:justify; padding:2px 20px; margin-top:-18px;"> 
 
              Pick 3 Midday 
 
             </h3> 
 
             <p class="upper-c-text" style="text-align:justify; padding:2px 20px; margin-top:-1px; color:#616161; font-size:14px;">Wednesday, December 20, 2017 Winning Number</p> 
 

 
             <ul class="nbr-grp"> 
 
              <li> 8 </li> 
 
              <li> 7 </li> 
 
              <li> 3 </li> 
 
             </ul> 
 

 

 
             <span class="upper-c-text next" style="color:#616161;"> 
 
               <strong>Top Prize/ Jackpot</strong> 
 
              </span> 
 
             <br> 
 
             <span class="current" style="color:#616161; font-size:20px;">$500</span> 
 
             <p style="border:1px solid #ddd"></p> 
 
             <p class="box-btm-part"> 
 
              <span style="color:#172d48;">Next Draw at : Thu, Dec-21-2017, 12:29 PM (US/Eastern) 
 
               </span> 
 
              <br> 
 

 
              <span class="upper-c-text next" style="font-size:18px; line-height:24px;font-family: 'Neris-Light',sans-serif; color:#172d48;"> 
 
                <strong>Next Jackpot</strong> 
 
               </span> 
 
              <br> 
 
              <span class="price next" style="color:#172d48; font-size:26px;"> 
 
                <strong>$500</strong> 
 
               </span> 
 
             </p> 
 
             <p> 
 
              <a href="https://www.lotterycorner.com/oh/pick-3-midday" class="result-btn">&nbsp;&#10095;&nbsp;&nbsp; Find Out More&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> 
 
             </p> 
 
          </td> 
 

 

 

 
         </tr> 
 

 
        </tbody> 
 
       </table> 
 
      </td> 
 
      <!-- child table 1 ends --> 
 
      <!-- child table 2 starts --> 
 
      <td class="table-responsive"> 
 
       <table class="table"> 
 
        <tbody class="logo-box"> 
 
         <tr class="table winning-nbr-box winning-nbr"> 
 
          <td class="winning-logo text-center"> 
 
           <a href="https://www.lotterycorner.com/oh/pick-3-evening"> 
 
             <img src="./Ohio (OH) Lottery Results - Latest Winning numbers_files/oh-pick3.png" alt="Ohio Pick 3 Evening Winning numbers" 
 
              style="margin-top:40px;"> 
 
            </a> 
 
           <p class="winning-inner"> 
 
            <p class="sort-text" style="border-bottom: 0px solid #fff;"> 
 
             <h3 style="font-size: 23px; color: #000; font-weight: 700; text-align:justify; padding:2px 20px; margin-top:-18px;"> 
 
              Pick 3 Evening 
 
             </h3> 
 
             <p class="upper-c-text" style="text-align:justify; padding:2px 20px; margin-top:-1px; color:#616161; font-size:14px;">Wednesday, December 20, 2017 Winning Number</p> 
 

 
             <ul class="nbr-grp"> 
 
              <li> 1 </li> 
 
              <li> 6 </li> 
 
              <li> 6 </li> 
 
             </ul> 
 

 

 
             <span class="upper-c-text next" style="color:#616161;"> 
 
               <strong>Top Prize/ Jackpot</strong> 
 
              </span> 
 
             <br> 
 
             <span class="current" style="color:#616161; font-size:20px;">$500</span> 
 
             <p style="border:1px solid #ddd"></p> 
 
             <p class="box-btm-part"> 
 
              <span style="color:#172d48;">Next Draw at : Thu, Dec-21-2017, 07:29 PM (US/Eastern) 
 
               </span> 
 
              <br> 
 

 
              <span class="upper-c-text next" style="font-size:18px; line-height:24px;font-family: 'Neris-Light',sans-serif; color:#172d48;"> 
 
                <strong>Next Jackpot</strong> 
 
               </span> 
 
              <br> 
 
              <span class="price next" style="color:#172d48; font-size:26px;"> 
 
                <strong>$500</strong> 
 
               </span> 
 
             </p> 
 
             <p> 
 
              <a href="https://www.lotterycorner.com/oh/pick-3-evening" class="result-btn">&nbsp;&#10095;&nbsp;&nbsp; Find Out More&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> 
 
             </p> 
 
          </td> 
 
         </tr> 
 

 
        </tbody> 
 
       </table> 
 
      </td> 
 
      <!-- child table 2 ends --> 
 
      <!-- child table 3 starts --> 
 
      <td class="table-responsive"> 
 
       <table class="table"> 
 
        <tbody class="logo-box"> 
 
         <tr class="table winning-nbr-box winning-nbr"> 
 
          <td class="winning-logo text-center"> 
 
           <a href="https://www.lotterycorner.com/oh/pick-4-midday"> 
 
             <img src="./Ohio (OH) Lottery Results - Latest Winning numbers_files/oh-pick4.png" alt="Ohio Pick 4 Midday Winning numbers" 
 
              style="margin-top:40px;"> 
 
            </a> 
 
           <p class="winning-inner"> 
 
            <p class="sort-text" style="border-bottom: 0px solid #fff;"> 
 
             <h3 style="font-size: 23px; color: #000; font-weight: 700; text-align:justify; padding:2px 20px; margin-top:-18px;"> 
 
              Pick 4 Midday 
 
             </h3> 
 
             <p class="upper-c-text" style="text-align:justify; padding:2px 20px; margin-top:-1px; color:#616161; font-size:14px;">Wednesday, December 20, 2017 Winning Number</p> 
 
             <ul class="nbr-grp"> 
 
              <li> 6 </li> 
 
              <li> 1 </li> 
 
              <li> 3 </li> 
 
              <li> 5 </li> 
 
             </ul> 
 

 

 
             <span class="upper-c-text next" style="color:#616161;"> 
 
               <strong>Top Prize/ Jackpot</strong> 
 
              </span> 
 
             <br> 
 
             <span class="current" style="color:#616161; font-size:20px;">$500</span> 
 
             <p style="border:1px solid #ddd"></p> 
 
             <p class="box-btm-part"> 
 
              <span style="color:#172d48;">Next Draw at : Thu, Dec-21-2017, 12:29 PM (US/Eastern) 
 
               </span> 
 
              <br> 
 

 
              <span class="upper-c-text next" style="font-size:18px; line-height:24px;font-family: 'Neris-Light',sans-serif; color:#172d48;"> 
 
                <strong>Next Jackpot</strong> 
 
               </span> 
 
              <br> 
 
              <span class="price next" style="color:#172d48; font-size:26px;"> 
 
                <strong>$5,000</strong> 
 
               </span> 
 
             </p> 
 
             <p> 
 
              <a href="https://www.lotterycorner.com/oh/pick-4-midday" class="result-btn">&nbsp;&#10095;&nbsp;&nbsp; Find Out More&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> 
 
             </p> 
 
          </td> 
 

 

 

 
         </tr> 
 

 
        </tbody> 
 
       </table> 
 
      </td> 
 
      <!--child table3 ends--> 
 
     </tr> 
 
    </table> 
 
</div>

出典

2017-12-28 06:48:10

関連する問題

 関連する問題