Question

我遇到了引导按钮的问题，当我在其中放入div或span等2个元素时，按钮内的小箭头将位于按钮文本下方。它就像它将获得一个浮动（左或右）属性，它将使元素垂直排序。

<!--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标签的变形样式：

P.S。：我打算让我的网站多语言（英语和波斯语）

Answer 1

使用正确的Bootstrap 4下拉按钮，而不是尝试重新发明轮子。 Bootstrap 4已经发明，创造并抛光了你所需要的所有“轮子”。

这是一个有效的代码示例（点击下面的“运行代码段”）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="dropdown">
    <button class="btn btn-outline-white dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Site Language
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">English</a>
        <a class="dropdown-item text-right" href="#">زبان سایت</a>
    </div>
</div>

Answer 2

我不打算详细介绍如何使用其他方法来实现您的目标，而只是告诉您代码中出错的位置。 <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>

引导按钮内的muli元素 - 按钮变形

2 个答案: