gpt4 book ai didi

html - Bootstrap 按钮内的 muli 元素 - 按钮变形

转载 作者:行者123 更新时间:2023-11-28 02:04:51 25 4
gpt4 key购买 nike

我在使用引导按钮时遇到问题,当我在其中放置 2 个元素(例如 div 或 span)时,按钮内的小箭头将位于按钮文本下方。就像它会获得一个 float (左或右)属性,它会使元素垂直排列。


<!--HTML Part-->
<div class="btn-group">
<button type="button" class="btn btn-outline-white dropdown-toggle" data-toggle="dropdown">
<span class="english">Site Language</span><span class="farsi">زبان سایت</span>
</button>

/*CSS Part*/
.english {display: none !important;}

.farsi {
display: none !important;
direction: rtl;
font-family: 'Lalezar';
text-align: right;
}

.english:lang(en), .farsi:lang(fa) {
display: block !important;
}

-

//JS Part
<script>
function changelang2fa() {
document.getElementsByTagName("HTML")[0].setAttribute("lang", "fa");
}

function changelang2en() {
document.getElementsByTagName("HTML")[0].setAttribute("lang", "en");
}
</script>

通常按钮是:

Normally the button is

内部有 span 标签的变形样式:

enter image description here

附言: 我打算让我的网站多语言(英语和波斯语)

最佳答案

我不会详细介绍如何使用替代方法来实现您正在做的事情,而只会告诉您代码中哪里出错了。 <span>元素应该得到 display:inline这将使向下箭头出现在它旁边。给它一个 display:block就像您所做的那样,导致箭头出现在下一行中。

.english {display: none !important;}

.farsi {
display: none !important;
direction: rtl;
font-family: 'Lalezar';
text-align: right;
}

.english:lang(en), .farsi:lang(fa) {
display: inline !important;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
<!--HTML Part-->
<div class="btn-group">
<button type="button" class="btn btn-outline-white dropdown-toggle" data-toggle="dropdown">
<span class="english">Site Language</span><span class="farsi">زبان سایت</span>
</button></div>
</body>
</html>

关于html - Bootstrap 按钮内的 muli 元素 - 按钮变形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49085030/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com