时间戳

首页 > 解决方案 > 引导卡体按钮横跨屏幕如何设置宽度换行内容

twitter-bootstrap - 引导卡体按钮横跨屏幕如何设置宽度换行内容

问题描述

车把中的代码

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

你可以看到下面的图片链接
图片：card button spans 100% 希望它包裹内容

标签： twitter-bootstrap

解决方案

这里的引导卡工作得很好

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

我会说，正如我从您的照片中看到的那样，您应该为班级提供， .btn.btn-primary { display: 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

推荐阅读