Question

我的导航栏上有一个个人资料图片，其中包含一个下拉菜单。它被卡在左侧。我尝试向右拉，向右浮动，ml-auto无效。

<ul class="navbar-nav">
    <li class="nav-item">
        <div class="dropdown ">
            <button class="btn pull-right ml-auto"  type="button" id="menu1" data-toggle="dropdown">
            <?php
                if($row['profileimage'] == ""){
            ?>

            <div class="iconHeader">
                <img class="profileimageHeader" src="pics/icon.png">
            </div>

Answer 1

您可能想尝试flex box

设置父标签（该标签为flex的下拉类）。

然后将图像的左边距设置为auto或margin：0 0 0 auto这是同一件事。

对齐自我是为了阻止图像拉伸

.iconHeader{
  background:red;
  width:50%;
  height: 300px;
  display:flex;

}

.profileimageHeader{
  margin: 0 0 0 auto;
  align-self:flex-start;
}

https://codepen.io/anon/pen/BEbWBX

另一种方法是对图像进行绝对定位，但是您需要相对于父对象定位，以使其无法在导航之外进行绝对定位

.iconHeader{
  position:relative;

}

.profileimageHeader{
position:absolute;
top:0;
right:0


}

Answer 2

float-right无效，因为引导导航栏位于flexbox中。问题中提供的信息不足以更好地理解原因。在第一行尝试mr-auto。

<ul class="navbar-nav mr-auto">

如何移动包含导航栏右侧下拉列表的图像？

2 个答案: