如何在Bootstrap 4卡边框上制作按钮？
在Bootstrap 4中，可以通过添加CSS类来在卡边框上制作按钮。以下是一种常见的方法：
- 首先，确保你已经引入了Bootstrap 4的CSS文件和jQuery库。
- 在HTML文件中，创建一个卡片元素，并为其添加适当的Bootstrap类。例如：
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some text here.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>- 在上述代码中，我们在卡片的内容区域内添加了一个按钮。按钮使用了
btn和btn-primary类，分别表示按钮样式和主要按钮颜色。你可以根据需要选择其他按钮样式和颜色。 - 如果你想要在卡边框上显示按钮，可以使用Bootstrap的
card类的text-center和border类。例如：
<div class="card text-center border">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some text here.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>在上述代码中，我们添加了text-center类来使卡片内容居中显示，并添加了border类来显示卡边框。
这样，你就可以在Bootstrap 4卡边框上制作按钮了。请注意，以上代码只是示例，你可以根据自己的需求进行修改和定制。
腾讯云相关产品和产品介绍链接地址：
相关·内容
有没有办法使用css为Bootstrap卡制作一个按钮，使其位于卡的边框上？如下图所示： ? 我浏览了文档，我不认为直接使用Bootstrap 4是可行的。也许它可以在css中设置样式？
浏览 28提问于2020-08-17得票数 1
回答已采纳
2回答
我试图弄清楚如何在CSS或Bootstrap中做边距，以便在每一张卡之间有相同的精确间距/边距。> <img src="<?>" class="logo__style" /><br
浏览 4提问于2022-02-26得票数 0
回答已采纳
所以我试图创建一个简单的卡片，只有一个背景图像和一个按钮，按钮链接被延伸到整个卡片上。按钮看起来很糟糕，但不是在底部，但如果我使用一个绝对的位置，它删除了拉伸的链接。} /* position: absolute; */}顺便提一句，是否有一种简单的方法，我可以让卡片边距伸展来填充空间，这样一行中的第一张卡片与页面和导航栏标题左对齐，一行中的最后一张卡片与注销按
浏览 7提问于2021-12-15得票数 0
回答已采纳
我想在Bootstrap 4导航栏上放置一些自定义图标按钮。我试着用这样的方式放置按钮： <img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">该按钮显示在导航栏上
浏览 18提问于2017-06-28得票数 0
回答已采纳
我正在尝试在我正在制作的Android应用程序(Java)中移动按钮。在某些情况下，在onResume()中，我会获得有关按钮的边距信息，然后尝试将按钮放置在屏幕的左侧边缘，并将该边距作为一个细微的间隙，这样看起来就不错了。见下文。ViewGroup.MarginLayoutParams) button.getLayoutParams(); button.setX(lp.leftMargin); 但是，很明显，在我以编程方式设置按钮位置之后因此，我的按钮</em
浏览 29提问于2021-08-04得票数 0
回答已采纳
1回答
我开始开发bootstrap4。我正试着做一个仪表盘。我已经找到了，但是它适用于引导3。我知道如何用引导来制作边栏，但是我不能复制他们在侧边栏中工作的多级下拉列表。我试过了，但没有找到任何方法或片段。有没有人知道我是如何在侧边栏中复制这些流畅的动画和下坠的？
浏览 2提问于2015-11-19得票数 0
回答已采纳
2回答
自举柱单元水平间距
、、、
我有一些按钮，应该改变他们在容器中的布局取决于屏幕的大小。引导网格系统做得很好，但我希望这些按钮或列之间有一些间距。按钮应该跨越容器的整个宽度。按钮可以缩短和扩大，但保持高度。我试过：
添加一些填充的建议，在其他主题-不起作用。使用了-偏移类，但它基本上插入了一整列的空间，这是太宽(我希望有大约5便士的水平间距)
浏览 3提问于2017-05-09得票数 2
回答已采纳
我正在尝试将FloatingActionButton从实现为三个选项卡中的两个，根据的说法：
如何在我的应用程序中为FAB按钮制作这种转换或动画？
浏览 3提问于2015-07-14得票数 34
回答已采纳
我正在开发一个使用字体-令人敬畏的角4项目，我按照本指南安装了npm：库。/node_modules/bootstrap/scss/bootstrap.scss", "../node_modules/font-awesome/scss/font-a
浏览 2提问于2017-12-08得票数 9
回答已采纳
1回答
我刚开始使用bootstrap 4，并且我试图制作一个折叠菜单。当我单击按钮时，内容显示得非常好。问题是当我试图折叠菜单时。当我单击该按钮时，它卡顿但不关闭。class="collapse navbar-toggleable" id="bird"> <h4>Test<
浏览 1提问于2016-08-01得票数 2
基本上，我想要做的是在gtk.Notebook中的选项卡之前放置一些按钮。我试着制作我自己的笔记本类型的小部件，它工作得很好，但它需要更多的工作才能使它像我所希望的那样灵活，而且效率也不高。
浏览 2提问于2010-02-06得票数 1
回答已采纳
1回答
如何在android上为按钮设置不同的宽度？比如顶部和底部是2dp，而左侧和右侧是4dp？谢谢。如果我的问题不清楚，我深表歉意。它不是边距或填充。但我想自定义的宽度，如边框-顶部或边框-在css中的左边。这在android中是可能的吗？
浏览 6提问于2011-08-09得票数 0
1回答
我正在使用版本引导程序如何使按钮始终对齐底部的代码html <divclass="card mb-4 box-shadow"> <h4 class="my-0 font-weight-normal">Free&
浏览 0提问于2018-02-12得票数 12
回答已采纳
2回答
我正在设置一个在线测试与引导，其中用户得到一个问题与4种不同的答案可能性。每个答案都是一个单选按钮，并有相应的答案，由PHP附和。/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAWalign="center“(参见代码)，这是通过文本字段对单选按钮进行居中，因此按钮</em
浏览 2提问于2019-08-07得票数 0
回答已采纳
我正在尝试构建以下功能：
<p class="card-text">Opportunity descr
浏览 10提问于2017-03-01得票数 0
回答已采纳
我想做一个用户界面的图标，如FIle，菜单，HElp等(因为我们经常看到这些图标在窗口应用程序中)。我选择了Visual Studio2010中的WIN32应用程序项目，并制作了一个带有这些按钮、选项卡和图标的图形界面。但是现在如何编写代码呢？例如，有一个图标:帮助。在Visual Studio中如何在Visual C++中制作用户界面？
浏览 3提问于2012-03-12得票数 0
我在我的角度9应用程序中使用ngb-bootstrap折叠控制。我已将ngb-bootstrap折叠控件放置在引导卡中，如您所见，将生成多个卡，并且我已经将卡头上的折叠按钮与该特定卡的卡体链接起来，因此当单击按钮时，该卡只会折叠，而不是整个卡集。但我面临的问题是，当我点击按钮时，整个卡集就会被折叠
<div class="animated fade
浏览 4提问于2020-03-17得票数 0
回答已采纳
我正在开发ReactJS，想知道如何在选项卡之间传递值。import {Link }from 'react-router-dom';
import {Tabs,Tab} from 'react-bootstrap';<div class="
浏览 0提问于2019-04-08得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
