Bootstrap 4表列大小沒有如預期的響應

作爲新的自引導和腳本與一般的HTML/CSS，我試圖創建一個簡單的HTML表（一行三列）。每一列都應該是偶數（佔其內部的表格的三分之一）。我遇到的問題是它似乎只佔表格中可用空間的三分之二（2/3）。我看了網上的解決方案上，Google搜索，閱讀棧等地的幾個職位/文章，但我還沒有找到一個解決方案，我希望尋求幫助。Bootstrap 4表列大小沒有如預期的響應

You can see a straight html render of the error here

這裏圖片詳細介紹了問題：

enter image description here

作爲示例的圖像顯示了薄ř ed列佔用了三分之一的表空間（綠色鑲邊表格），但是該表格沒有擴展到佔用紅色div中可用的全部空間。我已經通過html渲染尋找並沒有找到問題的原因。

<div class="area"> 
     <section class="wrapper scrollable"> 
      <div class="main-grid"> 
       <div class="agile-grids"> 
        <!-- blank-page --> 
        <div class="blank"> 
         <div class="blank-page"> 
          <h1>Session is active</h1> 


<table class=" " style="border: 1px solid red;"> 
    <tbody> 
     <tr scope="row" style="border: 1px solid red;"> 
      <td class="text-center" style="border: 1px solid green;"> 
       <div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;"> 
       <div class="card_user-charProfile"> 
        <img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan"> 

        <div class="card"> 
         <div class="card"> 
          <p> content goes here</p></div> 
         </div> 
        </div> <!-- end row --> 
       </div><!-- end CHARACTER PROFILE OUTER DIV --> 
      </td> 
     </tr>        
    </tbody> 
</table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</div>

這裏是CSS聲明/你爲什麼要使用錶鏈接

<script language="JavaScript" type="text/javascript"> 
    <!-- This JS disallows hijacking into someone else's frame... 
    if (top.location != self.location){top.location=self.location} 
    //--> 
</script> 

<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet"> 

<!-- Custom styles for this template --> 
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet"> 


<!-- font CSS --> 

<!-- roboto --> 
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css"> 

<!-- lato --> 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 

<!-- hammersmith one --> 
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet"> 


<!-- __themes/_fonts/font-glyphicons.css --> 
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet"> 

<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 

<script> 
    $(function() { 
    $("#supported").text("Supported/allowed: " + !!screenfull.enabled); 
    if (!screenfull.enabled) { 
     return false; 
    } 
    $("#toggle").click(function() { 
     screenfull.toggle($("#container")[0]); 
    }); 
}); 
</script>

來源

2017-08-12 Monkeework

？您可以使用引導網格系統處理所有這些問題。避免在你的項目中使用表格。但我會建議你給它一個寬度：

td{width:100% !important;}

試着做這可能會幫助你。

來源

2017-08-12 17:00:49

我正在使用一個表格，因爲我可以在聯繫人列表中使用三列來處理我無法顯示在列中的網格。 – Monkeework

是否奏效？ –

如果你正確地處理網格，你可以做表格所做的每一件工作...... –

Bootstrap 4表列大小沒有如預期的響應

回答

相關問題