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

Question

我正在编码一个有两个引导按钮的表。表在一个div中。

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

​

​

但是，当我添加另一个带有较长文本的按钮时，整个表按照下面的屏幕截图被推开：

​

​

我把max-width: inherit;添加到桌子上，它不起作用

我还将word-wrap: break-word;和overflow-wrap: break-word;添加到按钮中的文本中，但都没有工作。

我读到，这两个CSS属性适用于长文本(即，如果您有一个长单词，如thisisaverylongword)，而不是长短语。这就是为什么它没有在长篇大论上工作。

我将粘贴我的代码在这里，但它将没有意义的脚本片段，因为插件相关的短代码在其中。

我的问题是:如何使引导按钮中的短语服从屏幕宽度并将其包装成几行？

<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>

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

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
  <thead>
    <tr style="background-color: #007bff;">
      <th scope="col" style="color: white;">رابط التحميل</th>
      <th scope="col" style="color: white;">حجم الملف</th>
<th scope="col" style="color: white;">مرات التحميل</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: white;">
      <td scope="col"><button type="button" class="btn btn-warning">
        <div class="download-button">
            <span class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true" style="color: black;"></span> <a href="https://drive.google.com/uc?id=xxx&type=.pdf&export=download" rel="noopener" style="color: black; font-size: 1.2em; font-weight: bold; word-wrap: break-word;">أضغط للتحميل المباشر</a>
        </div></button>
<div class="separator-3"></div>    
      <button type="button" class="btn btn-success">
        <div class="download-button">
            <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=xxx" rel="noopener" style="color: black; font-size: 1.2em; font-weight: bold;">إضغط للتحميل من جوجل درايف</a>
        </div></button>

      </td>
      <td scope="col">MB</td>
      <td scope="col"></td>
    </tr>
  </tbody>
</table>

​

Answer 1

默认情况下，引导程序的.btn类具有white-space: nowrap;：

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

buttons.scss#L11

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

.btn {
  white-space: normal;
}