Question

我在这里有2个按钮，我希望它们具有相同的宽度

这是一张图片

这是代码：

  <div class="card-body">
    <h5 class="card-title">My Linkies</h5>
    <p class="card-text">total LINK</p>
    <p class="card-text">total linki</p>
    <p class="card-text">usd</p>
    <a class="card-link text-left">Reward</a>
   <a class="card-link" id="myDividends">LINK</a><br>
    <button type="button" class="btn btn-primary" name="button"> Reinvest</button>
    <button type="button" class="btn btn-primary" name="button"> withdraw</button>
  </div>
</div>

我试图更改CSS

.btn {
  padding: 10;
  text-align: center;
}

Answer 1

如果需要特定的宽度，则可以添加一个类（或仅在示例CSS中使用btn）来设置宽度。但是，如果要动态调整它们的大小以匹配最大按钮的宽度（在这种情况下，使“购买”与“批准”的宽度匹配），则需要添加一些Javascript以遍历所有按钮，找到最大宽度，然后将它们全部设置为该宽度。

编辑：添加了示例Javascript

假设您有可用的jquery（可能是因为您正在使用引导程序），它看起来可能像这样：

// Check the maximum width of all buttons in the card-body (could use an ID if you add one to your HTML)
var maxWidth = 0;
$('.card-body .btn').each(function(index, element) {
    var curWidth = $(element).width();
    if (maxWidth < curWidth ) {
        maxWidth = curWidth;
    }
});

// Set all buttons to the max width
$('.card-body .btn').width(maxWidth);

Answer 2

它们在包装，因为您在按钮上有填充。弄清楚填充是什么，或在css文件中将其设置为0。在此示例中，我使用5px作为填充。然后将使用的calc设置为将宽度设置为50％（不含填充的10px（右5，左5））

.btn {
  padding: 5px;
  width: calc(50% - 10px);
}

<div class="card-body">
    <h5 class="card-title">My Linkies</h5>
    <p class="card-text">total LINK</p>
    <p class="card-text">total linki</p>
    <p class="card-text">usd</p>
    <a class="card-link text-left">Reward</a>
   <a class="card-link" id="myDividends">LINK</a><br>
    <button type="button" class="btn btn-primary" name="button"> Reinvest</button>
    <button type="button" class="btn btn-primary" name="button"> withdraw</button>
</div>

Answer 3

如果两个按钮的宽度都希望相同，则只需为按钮指定宽度即可。

<style>
.card-body button{
    width:100px;
    }

</style>

 .card-body button{
        width:100px;

        }

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <div class="card-body">
        <h5 class="card-title">My Linkies</h5>
        <p class="card-text">total LINK</p>
        <p class="card-text">total linki</p>
        <p class="card-text">usd</p>
        <a class="card-link text-left">Reward</a>
        <a class="card-link" id="myDividends">LINK</a><br>
        <button type="button" class="btn btn-primary" name="button"> Reinvest</button>
        <button type="button" class="btn btn-primary" name="button"> withdraw</button>
    </div>
    </div>

注意：如果按钮上有动态文本，建议您使用max-width，以免损坏容器并弄乱外观。希望有帮助

Answer 4

您需要为两个按钮设置一个宽度，例如150像素，也可以将两个按钮的宽度都设置为％。

固定宽度：

.card-body{
text-align:center;
}
.card-body .btn{
width:150px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="card-body">
    <h5 class="card-title">My Linkies</h5>
    <p class="card-text">total LINK</p>
    <p class="card-text">total linki</p>
    <p class="card-text">usd</p>
    <a class="card-link text-left">Reward</a>
   <a class="card-link" id="myDividends">LINK</a><br>
    <button type="button" class="btn btn-primary" name="button"> Reinvest</button>
    <button type="button" class="btn btn-primary" name="button"> withdraw</button>
  </div>

宽度（％）。您将需要一个包装器。

.card-body{
text-align:center;
}
.card-body .btn-wrap{
  display:flex;
  justify-content:space-around;
}

.card-body{
  width:100%;
}

.card-body .btn{
  width:calc(50% - 10px);
}

.btn{
padding:10
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body">
    <h5 class="card-title">My Linkies</h5>
    <p class="card-text">total LINK</p>
    <p class="card-text">total linki</p>
    <p class="card-text">usd</p>
    <a class="card-link text-left">Reward</a>
  <div class="btn-wrap">
    <button type="button" class="btn btn-primary" name="button"> Reinvest</button>
    <button type="button" class="btn btn-primary" name="button"> withdraw</button>
    </div>
  </div>

https://developer.mozilla.org/en-US/docs/Web/CSS/padding 顺便说一句，要使填充工作，它需要一个像“ px”或“％”之类的单位。这也不是使按钮具有相同宽度的最直接方法。

如何使按钮具有相同的宽度

4 个答案: