Safari 剪切按钮的文本

Question

在 Safari 浏览器上我遇到了这个问题：

我尝试了overflow: visible;，但没有帮助，我在此按钮上使用引导 css 类：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">
        <table>
            <tr>
                <td class="float-left">
                    <a href="#"> <img class="img-responsive brand" />
                    </a>
                </td>
                <td class="col-md-2">
                    <br>
                    <br>
                    <br>
                    <div class="btn-group">
                        <div class="row">
                            <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                            <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</header>

Answer 1

这里的问题是您的容器对于按钮来说不够大。你有两个选择：

更改您的 button 课程

目前您使用的是col-xs-6，即每列的宽度为 50%。然而，你在第一列中有一些空间，你可以给你的第二列。请参阅下面的 sn-p。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">
        <table>
            <tr>
                <td class="float-left">
                    <a href="#"> <img class="img-responsive brand" />
                    </a>
                </td>
                <td class="col-md-2">
                    <br>
                    <br>
                    <br>
                    <div class="btn-group">
                        <div class="row">
                            <button type="button" class="btn btn-link col-xs-4"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                            <button type="button" class="btn btn-link col-xs-8"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</header>

将您的 table 宽度更改为 100%

正如 Awadhesh 所提到的，您应该将 table 元素设为 100% 宽度。尽管应尽可能避免使用表格进行布局。

table { width: 100% }

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <header>
         <div class="container-fluid">
            <table>
                <tr>
                    <td class="float-left">
                        <a href="#"> <img class="img-responsive brand" />
                        </a>
                    </td>
                    <td class="col-md-2">
                        <br>
                        <br>
                        <br>
                        <div class="btn-group">
                            <div class="row">
                                <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                                <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </header>

Answer 2

试试这种方式html：

<div class="container-fluid">
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td class="float-left"><a href="#"> <img class="img-responsive brand"> </a></td>
            <td><br>
              <br>
              <br>
              <div class="btn-group">
                <div class="row">
                  <div class="col-xs-6">
                    <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                  </div>
                  <div class="col-xs-6">
                    <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                  </div>
                </div>
              </div></td>
          </tr>
        </tbody>
      </table>
    </div>

Answer 3

一些事情：

1. 摆脱你的桌子。 Bootstrap 会为您进行布局，因此不需要它们。

2. 不要使用<br> 作为间距。使用内边距或边距

3. 将col-xs-6更改为col-md-6

以下 HTML 有效：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">

                <a href="#"> <img class="img-responsive brand" />
                </a>

                <div class="btn-group">
                    <div class="row">
                        <button type="button" class="btn btn-link col-md-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                        <button type="button" class="btn btn-link col-md-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                    </div>
                </div>

     </div>
</header>

这里有一个活生生的例子：https://jsfiddle.net/fescjgwm/2/