Question

我正在编码具有2个Bootstrap按钮的表。该表位于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>

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

<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

Bootstrap的.btn类默认具有white-space: nowrap;：

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

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_buttons.scss#L11

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

.btn {
  white-space: normal;
}

如何使表格和引导按钮根据屏幕大小进行调整？

1 个答案: