Кнопка «Начальная страница карты памяти» распространяется по экрану, как установить ширину переноса содержимого

Question

код в руле

<h1>Ideas</h1>

{{#each ideas}}
    <div class="card card-body mb-2">
        <h4 class="card-title">{{title}}</h4>
        <p class="card-text">{{detail}}</p>
        <small>{{id}}</small>
        <a href="/ideas/edit/{{id}}" class="btn btn-primary">Edit</a>
    </div>
{{else}}
no ideas found
{{/each}}

Вы можете увидеть ссылку на изображение ниже
изображение: пуговицы на карточке на 100% хотят обернуть содержимое

Answer 1

Здесь карта для начальной загрузки работает отлично

https://jsfiddle.net/8c8y5qf6/1

Я бы сказал, как я видел из вашей фотографии, что вы должны дать для класса .btn.btn-primary { display: inline-block } и это должно быть уже встроенный блок по умолчанию , чтобы не охватывать всю ширину, так как я вижу, что карта занимает полную ширину, это могут быть все дочерние элементы внутри блок дисплея или дисплей flex для всех детей дает такой стиль, например, который показывает, как выглядит кнопка

.card--inline .btn {
    display: inline-block;
}

.card--flex .btn {
   display: flex;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card card--inline">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>


<div class="card card--flex">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

https://jsfiddle.net/8c8y5qf6/1