Question

我有一个恼人的问题，我希望修改引导按钮的大小。当我滚动引导按钮时，它会调整整个按钮的大小。我使用javascript来更改文本（mouseover和mouseout）。如何禁用此按钮以使按钮保持相同的大小并且仅更改文本？

示例按钮：

<button type='button' id='Warning' class='btn btn-warning btn-block text-left' data-toggle='modal' data-target='#myModal'>Pending</button>

使用Javascript：

    $('body').on('mouseover', '#Success', function (e) {
        $(this).removeClass("btn-success");
        $(this).addClass("btn-danger");
        $(this).text('Deactivate?');
    });
    $('body').on('mouseover', '#Warning', function (e) {
        $(this).removeClass("btn-warning");
        $(this).addClass("btn-success");
        $(this).text('Activate?');
    });

Answer 1

如果2个文本标签的可见宽度不同，则按钮必须更改大小以容纳文本。

您应该通过CSS设置固定大小的按钮，该大小足以容纳任何文本标签：

#Warning {
    width: 200px;
}

如果没有看到更多的标记，很难知道这会如何影响其他布局元素。

您可以尝试在水平方向为按钮设置auto边距：

#Warning {
    width: 200px;
    margin: 0 auto;
}

或者可能是您需要明确地将按钮放在其容器中：

.class-name-of-the-buttons-parent-container {
    text-align: center;
}

Answer 2

在鼠标悬停事件期间冻结按钮的宽度和高度。另外，将其填充设置为0以使文本居中：

＆＃13;

$('body')
  .on('mouseover', '#Warning', function (e) {
    $(this).css({
      width: $(this).outerWidth(),
      height: $(this).outerHeight(),
      padding: 0
    });
    $(this).text('Activate?');
  })
  .on('mouseout', '#Warning', function (e) {
    $(this).text('Pending');
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Warning'>Pending</button>

＆＃13;

Answer 3

我建议给按钮一个固定的宽度，足够两个状态，并删除水平填充。您可以选择将其text-align:center

Answer 4

你应该添加一个额外的CSS类来覆盖Bootstrap默认值到按钮。有点像...

.fixed_size_button {
    width: 200px;
}

在某些情况下，你可能需要添加！important以实际覆盖之前的CSS设置，特别是因为Bootstrap本身使用了很多！important语句。 E.g。

.fixed_size_button {
    width: 200px !important;
}

但是你应该尽可能地避免这种情况，因为它很难维护。

在鼠标悬停时更改按钮文本，调整整个按钮的大小

4 个答案: