css - 如何使表内的 block 响应？

我正在开发 Bootstrap。我想让表内的 block 响应。当我调整浏览器大小时，表格内的 block (蓝框)不会根据屏幕大小进行调整。我是 Bootstrap 的新手。

.bluebox
    {
        background-color: #F6F6FF;
        border: 1px solid #232850;
        font-size: 10px;
        padding: 10px;
        overflow:hidden;
         min-width:267px;
        width:100%;
        display:block;
       overflow:auto;
    }

<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
         <div class="page_info">
                     <div class="breadcrumb">
                         <a href="Default.aspx" style="font-size: 12px;color: #666;font-weight: 300;text-decoration: none;font-family: 'Merriweather', sans-serif;">Home</a> 
                         <span class="delimiter fa fa-arrow-circle-right"></span> 
                         <span class="current" style="font-weight: 300;font-size: 12px;color: #666;">Link us</span></div> 
            <div class="page-title">
                        <h1 style="font-family: 'Roboto';font-size: 40px;line-height: 44px;color: #339933;font-weight: 300;">Link us</h1> 

            </div>
                        <div class="clearfix"></div>
                </div>

        <p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">To link to us, please choose and save one of the logos displayed below, and link it to ' http://www.dubaiexporters.com '.</p>

        <p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">As per our linking Policy, no prior permission is required to link 'DubaiExporters.com' from your website. However, we would like you to inform us (using the 'Contact us' option) about any links provided to this Portal so that you can be informed of any changes or updates.</p>

        <p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">We encourage you to choose from the following graphic banners which can be conveniently placed on your website and linked to our Portal.</p>

        <p><b style="color: #339933;padding-left:18px; font-size:20px;">Banners for Download </b></p>

        <table class="table table-bordered" style="margin-left:18px;">
    <thead>
      <tr>
        <th>Banner</th>
        <th>Link</th>
       
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>         
            <a href="images/dubaiexportersbanners/dubaiexporters_168x72.gif" target="_blank"><img src="images/dubaiexportersbanners/dubaiexporters_168x72.gif" alt="dubaiexporters.com 130x38 jpg" width="168" height="72"></a>
        </td>
        <td>
            <div class="bluebox">&lt;a href="http://www.dubaiexporters.com/"&gt;&lt;img src="http://www.dubaiexporters.com/images/dubaiexporters_168x72.gif" border="0" alt="Dubai Exporters - Directory of Exporters, Manufacturers &amp; Suppliers" /&gt;&lt;/a&gt;</div>
        </td>
       
      </tr>
      
      
    </tbody>
  </table>
    </div>
</body>

</html>

链接: https://jsfiddle.net/1h0bt35f/4/

最佳答案

更新:添加 word-break: break-all; 到 CSS 类。

此外，您需要以百分比定义宽度以使其响应。

目前，你给bluebox设置了267px的宽度。

试试下面的代码，您可以将最小宽度设置为 267px，当它因宽度缩放为 100% 时会自动处理。

.bluebox {
  background-color: #F6F6FF;
  border: 1px solid #232850;
  font-size: 10px;
  padding: 10px;
  overflow: hidden;
  width: 100%;
  display: block;
  overflow: auto;
  word-break: break-all;
}

关于css - 如何使表内的 block 响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51147359/

css - 如何使表内的 block 响应？

上一篇：css - 在 4 :5 ratio and fit inside container view in react native 中显示图像

下一篇：php - 在 Woocommerce 中添加除特定国家/地区以外的内联 CSS