标签不是嵌入式引导程序4

Question

我正在尝试在下拉菜单href和一些文本旁边显示bootstrap 4标签，这是我整理的当前HTML：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <img src="http://example.org/img/user/user-13.jpg" alt="">
    <span class="d-none d-md-inline">Adam Schwartz</span> 
    <span class="label bg-blue">Free</span> 
    <b class="caret"></b>
</a>

我也正在使用以下CSS：

.header .navbar-nav>li .dropdown-toggle .label, .header .navbar-nav>li>a .label {
    position: absolute;
    top: 8px;
    right: 5px;
    display: block;
    background: #00acac;
    line-height: 12px;
    font-weight: 600;
    color: #fff;
    padding: .3em .6em;
    border-radius: 20px;
}

但是我遇到的问题是我的标签没有在插入符号之间的名称右侧显示内联，如下所示：< / p>

Answer 1

如果要使其正常流动，请除去position: absolute;。

当您包含以下样式规则时，您就是在告诉浏览器将.label从流中移出，并将其从DOM中最接近的上级组件的顶部到顶部8px，从右边的位置5px定位。设置了position，例如相对或绝对。

position: absolute;
top: 8px;
right: 5px;

Answer 2

使用Bootstrap Columns

img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<div class="col-12 mt-3">
		<a href="#" class="dropdown-toggle row d-flex align-items-center align-self-center" data-toggle="dropdown">
			<div class="col-1 div-container px-0 mr-4">
				<img src="http://tineye.com/images/widgets/mona.jpg" class="" alt="" />
			</div>
			<div class="col-5 col-sm-3 col-md-2 ml-3 pl-2 pr-0 ml-md-0 pl-md-0 text-left">Adam Schwartz</div>
			<div class="px-2 pl-lg-0 pr-lg-2">Free</div>
		</a>
	</div>
</div>

希望对您有帮助。

Answer 3

对我有用。请参见下面的实时示例。

.dropdown-toggle,
.dropdown-menu {
  width: 300px;
}

.btn-group img {
  margin-right: 10px;
}

img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <img src="http://lorempixel.com/75/50/abstract/">
      Adam Schwartz
    <span class="badge badge-primary">Free</span>
      <span class="glyphicon glyphicon-chevron-down"></span>      
    </button>

  <!--  Add the .dropdown-menu class to a <div> element to actually build the dropdown menu. -->
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
  </div>
</div>