如何创建一个以文本为中心的引导程序圆形按钮

我正试图为数字添加一个按钮，一个圆形按钮。我可以做，但文本(数字不居中(。理想情况下，如果我有1到15个圆形15按钮从1到15

下方的代码

body {
padding: 1em;
}

<link
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet"
id="bootstrap-css"
>

<button type="button" class="btn btn-info btn-circle btn-lg">100</button>

以上代码是从这个链接使用的

一个非常简单的类将解决您的问题-

<button type="button" class="btn btn-info p-5 rounded-circle btn-lg">100</button>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
body {
padding: 1em;
}
</style>

</head>
<body>
<button type="button" class="btn btn-info p-5 rounded-circle btn-lg">100</button>
</body>
</html>

这些更改将产生居中文本的圆形按钮：

包括您提供的链接中的.btn-circlecss规则，
将按钮文本包装在CCD_ 2中并给CCD_。

body {
padding: 1em;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}

/* use negative margins to accommodate wider button text */
.btn-circle span {
margin: 0 -2rem;
}

<link
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet"
id="bootstrap-css"
>
<button
type="button"
class="btn btn-info btn-circle btn-lg"
><span>100</span></button>

必须包含.btn-circle的CSS才能具有圆角。我从你提供的链接中复制了CSS，并删除了所有填充，使文本居中。这将导致：

.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 0; // changed
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle.btn-lg {
width: 50px;
height: 50px;
padding: 0; // changed
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 0; // changed
font-size: 24px;
line-height: 1.33;
border-radius: 35px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-circle btn-lg">100</button>

对于Bootstrap 4，我需要圆形按钮，它们的大小必须与默认按钮的高度匹配或输入的高度-对于内联表单。

我使用了以下代码：

SCSS

$btn-height-border: $btn-border-width * 2;
$btn-circular-height: add(
$btn-line-height * 1em,
add($btn-padding-y * 2, $btn-height-border, false)
);
$btn-circular-height-sm: add(
$btn-line-height-sm * 1em,
add($btn-padding-y-sm * 2, $btn-height-border, false)
);
$btn-circular-height-lg: add(
$btn-line-height-lg * 1em,
add($btn-padding-y-lg * 2, $btn-height-border, false)
);
.btn-circular {
width: $btn-circular-height;
height: $btn-circular-height;
padding-right: 0;
padding-left: 0;
text-align: center;
border-radius: 50% !important;
line-height: 1;

&.btn-sm {
width: $btn-circular-height-sm;
height: $btn-circular-height-sm;
}
&.btn-lg {
width: $btn-circular-height-lg;
height: $btn-circular-height-lg;  
}
}

代码笔：https://codepen.io/andreivictor/pen/vYvBJKB

相关内容

最新更新

热门标签：