Question

如何使可见按钮宽度相等而不对每个按钮硬编码固定宽度？是否有适用于任何大小的按钮的通用解决方案（因为这取决于文本）

这是剪辑：

<div class="btn-toolbar">
<button class="btn-success btn btn-default" name="resolution" value="corrected" type="submit">Submit</button>
<div class="pull-right btn-group">
<button class="btn-warning btn btn-default" name="resolution" value="skipped" type="submit">Skip</button>
<button class="btn-warning btn btn-default" name="resolution" value="not_found" type="submit">Not found</button>
</div>
</div>

Answer 1

制作具有固定宽度的所有按钮并不是一件好事，因为按钮宽度将依赖于按钮的文本。看起来不太好看。但是如果它对你来说是必须的，那么你可以在你的按钮上添加一个类，并在你的css规则上为该类分配一个固定的宽度。或者您也可以直接在CSS上的按钮中设置固定宽度。但我强烈建议不要这样做，因为它不会看起来不错。为两个场景添加代码

添加课程

<button class="btn-warning btn btn-default fixed_width" name="resolution" value="skipped" type="submit">Skip</button>

在您的CSS文件

上

.fixed_width{
    width:**YOUR_DESIRED_WIDTH_GOES_HERE**;
}

或直接分配 -

button{
    width:**YOUR_DESIRED_WIDTH_GOES_HERE**;
}

Answer 2

只能通过在样式中设置按钮所需的宽度来执行此操作。在示例中，我已将所需宽度指定为100px。您可以将其设置为所需的值。

＆＃13;

<!DOCTYPE HTML>
<html>
  <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <style>
        .btn{
          width: 100px;
        }
      </style>
  </head>
  <body>
    <div class="btn-toolbar">
        <button class="btn-success btn btn-default" name="resolution" value="corrected" type="submit">Submit</button>
        <div class="pull-right btn-group">
            <button class="btn-warning btn btn-default" name="resolution" value="skipped" type="submit">Skip</button>
            <button class="btn-warning btn btn-default" name="resolution" value="not_found" type="submit">Not found</button>
        </div>
    </div>
  </body>
</html>

＆＃13;

如何在Bootstrap3中使表单按钮大小相等？

2 个答案: