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}}

您可以看到下面的图片链接 image: card button spans 100% want it to wrap content

Answer 1

这里的引导卡工作完全正常

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

我会说，正如我从你的照片中看到的那样，你应该为这堂课提供帮助 .btn.btn-primary { display: inline-block }它应该已经 inline-block默认，不能跨越全宽，因为我看到卡占据了整个宽度，可能是所有的孩子都在显示块或所有孩子的display 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

bootstrap卡体按钮跨越屏幕如何设置宽度换行内容

1 个答案: