面包屑将使用 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>

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

breadcrumb will be placed in right corner side button using uikit

html

css

getuikit