移动响应式中的Boostrap问题

Question

我有一个boostrap的问题，正确地对齐按钮，它不能显示我的位置在改变到移动视图的视图。

以下是我的编码（影响我的移动视图位置）。

<div class="topnav" style="margin-right:5%;">
<span id="curTime" class='hide'>&nbsp;</span>
<div class="dropdown">
<a id="dropbtn" style="margin-right:20px;" href="#" onclick="setting()" data-toggle="tooltip" data-original-title="Setting" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-wrench"></i>
</a>
<div class="dropdown-content">
<a href="?loc=user_designation">Tetapan Umum</a>
<a href="?loc=user">Pengurusan Pengguna</a>
</div>
</div>

<a href="#" onclick="logout()" data-toggle="tooltip" data-original-title="Logout" data-placement="bottom" class="btn btn-metis-1 btn-sm">
<i class="fa fa-power-off"></i>
</a>
</div>                  

下面是我的输出。

(正常视图)

(移动响应式视图)

我预期的结果是像下图一样，两个按钮可以对齐同一条线。

希望有人能指导我如何解决。谢谢。

Answer 1

你必须用 "ul "标签和 "li "标签包裹按钮，并且你必须应用inline-block CSS。