Как сделать кнопки одинаковой ширины

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

Вам нужно установить ширину для обеих кнопок, например 150px, или вы можете дать им обеим ширину в%.

Фиксированная ширина:

.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», «%» или другой. Это также не самый простой способ получить кнопку такой же ширины.

Answer 2

Они переносятся, потому что у вас есть кнопка на кнопке. Выясните, каков ваш отступ, или установите его в 0 в вашем файле css. в этом примере я использовал 5px в качестве отступа. Затем установите используемый cal c, чтобы установить ширину 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>

Примечание: Если у вас есть динамический c текст для кнопки, я рекомендую упомянуть max-width, чтобы вы не разбили контейнер и не испортили до появления. Надеюсь, что helpsssss

Answer 4

Если вы хотите указать определенную c ширину, вы можете добавить класс (или просто использовать btn, как в вашем примере CSS), чтобы установить ширину. Однако, если вы хотите динамически изменить их размер в соответствии с шириной самой большой кнопки (в этом случае, чтобы Buy соответствовал ширине Approve), вам нужно будет добавить некоторые Javascript к l oop через все из кнопок, найдите наибольшую ширину, а затем установите их все на эту ширину.

Редактировать: добавленный образец Javascript

Предполагая, что у вас есть jquery в наличии (вероятно, учитывая, что вы используете bootstrap), это может выглядеть примерно так:

// 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);