Question

我正在使用Bootstrap。我想使表内的块响应。在调整浏览器大小时，表内的块（蓝框）未根据屏幕尺寸进行调整。我是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/

Answer 1

更新：将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;
}

Answer 2

尝试一下：

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

如何使表内的块响应？

2 个答案: