我在使用引导按钮时遇到问题，当我在其中放置 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>
通常按钮是:
内部有 span 标签的变形样式:
附言: 我打算让我的网站多语言(英语和波斯语)
最佳答案
我不会详细介绍如何使用替代方法来实现您正在做的事情，而只会告诉您代码中哪里出错了。 <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/