文章/答案/技术大牛

发布

社区首页 >问答首页 >启动按钮内的muli元素-按钮变形

问启动按钮内的muli元素-按钮变形
EN

Stack Overflow用户

提问于 2018-03-03 14:11:09

回答 2查看 59关注 0票数 0

我在引导按钮上出了问题，当我在里面放两个元素，比如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>

通常按钮是：

变形样式，内有跨距标签：

P.S.：我打算使我的网站多语种(英语和波斯语)

html

css

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-03-03 14:31:43

我不打算详细介绍如何使用其他方法来实现您正在做的事情，而是告诉您代码中哪里出错了。<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>

票数 0

Stack Overflow用户

发布于 2018-03-03 14:21:07

使用适当的引导带4下拉按钮，而不是试图重新发明车轮.引导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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49085030

复制

相似问题

问启动按钮内的muli元素-按钮变形
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问启动按钮内的muli元素-按钮变形EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问启动按钮内的muli元素-按钮变形
EN