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表列大小没有如预期的响应

回答

相关问题