ярлык не встроенный загрузчик 4

Question

Я пытаюсь показать ярлык начальной загрузки 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;
}

Но проблема, с которой я сталкиваюсь, заключается в том, что мой ярлык не отображается внутри справа от имени между кареткой, когда высм. ниже:

Answer 1

Использование 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 2

Это сработало для меня.Пожалуйста, смотрите живой пример ниже.

.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>

Answer 3

Удалите position: absolute;, если хотите, чтобы он работал нормально.

Когда вы включаете приведенные ниже правила стиля, вы говорите браузеру убрать .label из потока и расположить его на 8 пикселей сверху и на 5 пикселей справа от ближайшего родительского компонента в DOM с помощьюс набором position, таким как относительный или абсолютный.

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