面包屑将使用uikit放置在右上角的侧面按钮中

Question

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit-icons.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="uk-container-expand">
	<div class="uk-height-large  uk-background-cover uk-light uk-flex uk-flex-center uk-flex-middle " data-src="https://source.unsplash.com/1200x800/?camera" uk-img>
		<div class="uk-flex uk-flex-column uk-flex-bottom">
			<div>
				<h2>Background image</h2>
			</div>
			<div class="uk-float-right">
				<ul class="uk-breadcrumb" id="breadcrumb">
					<li><a href="#">Item</a></li>
					<li><a href="#">Item</a></li>
					<li class="uk-disabled"><a>Disabled</a></li>
					<li><span>Active</span></li>
				</ul>
			</div>
		</div>
	</div>	
</section>

我需要将面包屑移动到页面右侧的建议。

Answer 1

您可以使用position属性来解决此问题，如下所示：

.uk-float-right {
  float: right;
  position: absolute;
  bottom: 0;
  right: 20px;
}
.uk-container-expand{
   position:relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit-icons.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="uk-container-expand">
  <div class="uk-height-large  uk-background-cover uk-light uk-flex uk-flex-center uk-flex-middle " data-src="https://source.unsplash.com/1200x800/?camera" uk-img>
    <div class="uk-flex uk-flex-column uk-flex-bottom">
      <div>
        <h2>Background image</h2>
      </div>
    </div>
   <div class="uk-float-right">
        <ul class="uk-breadcrumb" id="breadcrumb">
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li class="uk-disabled"><a>Disabled</a></li>
          <li><span>Active</span></li>
        </ul>
      </div>
  </div>
</section>