html - Bootstrap 按钮文本未调整大小

标签 html css twitter-bootstrap-3

我正在使用 bootstrap,并且有几个社交媒体按钮。我需要它们更大并且我已经使社交图标足够大,但我似乎无法让文本同样增加。有人有主意吗? HTML:

<a role="button" class="btn btn-primary btn-tw col-6 mx-1 my-1" 
href="https://twitter.com/alvanhumane?lang=en" target="_blank"><i class="fab 
fa-twitter-square fa-5x"></i> Twitter</a>
<a role="button" class="btn btn-primary btn-in col-6 mx-1 my-1" 
href="https://www.instagram.com/explore/locations/99236675/al-van-humane- 
society/" target="_blank"><i class="fab fa-instagram fa-5x"></i> 
Instagram</a>

和 CSS:

a.btn-tw {
    background-color: #00acee;
    font-size: 5em;
}

a.btn-in {
    background-color: #3f729b;
    font-size: 5em;
}

最佳答案

尝试使用 !important .它将覆盖在它之后加载的任何内容

a.btn-in {
    background-color: #3f729b;
    font-size: 5em !important;
}

您也可以在 <head> 中的自定义样式表之后加载 bootstrap CSS 样式表。 HTML 文档的一部分。将 Bootstrap 链接放在您自己的链接之上。

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

关于html - Bootstrap 按钮文本未调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50709219/

相关文章:

css - 遍历 12 列 : What's the harm?

javascript - 将网站分为 3 个部分 -> 1 个水平部分和 2 个垂直部分

html - 我可以将框阴影自定义为图像后面的三 Angular 形吗?

html - Div 的定位 - 居中 + 固定问题

javascript - 类切换时开始动画

google-maps - Dart google_maps 问题

javascript - jQuery 只渲染一个选择框

html - 固定 HTML 表格中的特定行或列

c# - 将 javascript 嵌入到现有的 pdf 中

html - 无法垂直居中 Bootstrap 3 媒体