Twitter bootstrap 如何根据屏幕大小调整表和引导按钮的大小？

我正在编写一个有2个引导按钮的表。该表位于

div

中

当按钮中的文本较短时，表格遵循屏幕宽度。请检查下面的屏幕截图

然而，当我添加另一个较长文本的按钮时，整个表格被按出，如下面的屏幕截图所示：

我添加了

最大宽度：inherit到表中，它不起作用

我还添加了
wordwrap:break-word和
溢出包装：断开单词添加到按钮中的文本，但均无效

我了解到，这两个CSS属性适用于长文本（即，如果您有一个像这样的长单词IsaveryLongWord），而不是长短语。这就是为什么它不适用于长短语的原因

我将把我的代码粘贴到这里，但由于其中存在与插件相关的短代码，它作为脚本片段将没有意义

我的问题是：如何让引导按钮中的短语遵守屏幕宽度并换行成几行

<table class="table">
  <thead>
    <tr style="background-color: #007bff;">
      <th scope="col" style="color: white;">[wpml-string name="Download Button Table Header"]رابط التحميل[/wpml-string]</th>
      <th scope="col" style="color: white;">[wpml-string name="Download Size Table Header"]حجم الملف[/wpml-string]</th>
<th scope="col" style="color: white;">[wpml-string name="Download Count Table Header"]مرات التحميل[/wpml-string]</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: white;">
      <td scope="col"><button type="button" class="btn btn-warning">
        <div class="download-button" onclick="$('.loading').show();">
            <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true" style="color: black;"></span> <a href="https://drive.google.com/uc?id=[types field='download-link-id'][/types]&type=.pdf&export=download" rel="noopener" style="color: black; font-size: 1.2em; font-weight: bold; word-wrap: break-word;">[wpml-string name="Download Button - Direct"]أضغط للتحميل المباشر[/wpml-string]</a>
        </div></button>
<div class="separator-3"></div>    
      <button type="button" class="btn btn-success">
        <div class="download-button" onclick="$('.loading').show();">
            <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true" style="color: black; word-wrap: break-word;"></span> <a href="https://drive.google.com/open?id=[types field='download-link-id'][/types]" rel="noopener" style="color: black; font-size: 1.2em; font-weight: bold;">[wpml-string name="Download Button - Gdrive"]إضغط للتحميل من جوجل درايف[/wpml-string]</a>
        </div></button>

      </td>
      <td scope="col">[types field='download-file-size'][/types]MB</td>
      <td scope="col">[download_count]</td>
    </tr>
  </tbody>
</table>


[wpml string name=“下载按钮表标题”]wpml string
[wpml string name=“下载大小表头”]
[wpml string name=“下载计数表头”]wpml string
[types field='download-file-size'][/types]MB
[下载]

编辑：我删除了与插件相关的短代码，并创建了一个可以正常运行的工作脚本：



رابط التحميل
حجم الملف
مرات التحميل
兆字节
Bootstrap的.btn类有
空白：nowrap默认情况下：

.btn {
  display: inline-block;
  font-weight: $btn-font-weight;
  text-align: center;
  white-space: nowrap;
  ...


在主题或样式中，将其设置为：

.btn {
  white-space: normal;
}

我认为bootstrap没有实现这个功能。但是您可以使用更新此属性。@EugeneJoseph，我并不是说引导是否是原因。我只是详细解释我的情况。我的问题不是桌子没有反应。我的问题是，文本不服从响应性，将所有内容都推出。非常感谢您的解决方案。它工作得非常好。他们的默认设置有什么原因吗？我的意思是：我需要保留它以使引导正常工作吗？默认设置只是为了避免对较短的字符串（如“Buy Now”等）进行意外的包装。但在您的情况下，如果需要，可以覆盖它。