Question

我一直在使用这个引导示例： https://getbootstrap.com/docs/4.1/examples/offcanvas/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

     <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-dark rounded box-shadow">
    <img class="mr-3" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
    <div class="lh-100">
      <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
      <small>Since 2011</small>
    </div>
  </div>

我想在此按钮的右侧添加一个按钮，但是向右拉将不起作用： Desired result

有什么想法可以在代码中解决吗？

Answer 1

将small标记移出1h-100 div并向其添加类ml-auto

 <small class="ml-auto text-white">Since 2011</small>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-dark rounded box-shadow">
  <img class="mr-3" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
  <div class="lh-100">
    <h6 class="mb-0 text-white lh-100">Bootstrap</h6>
    
  </div>
  <small class="ml-auto text-white">Since 2011</small>
</div>

Answer 2

Yeffet 我已经修改了您的代码，请查看一下。在我的浏览器上看起来还不错，我使用了基于自定义CSS样式的float属性。随时问任何问题如果该代码解决了您的问题，请投票确认我们的努力。

谢谢。

最良好的祝愿

<html>
<style>
.mb-0{
float:left;
}
.small{
color:red;
float:right;
margin-left:70%;
margin-top:20px;
}
.clear{
clear:both;
}
</style>
  <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
    <img class="mr-3" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
    <div class="lh-100 row">
      <h6 class="mb-0 text-white lh-100 col-md-6">Bootstrap</h6>
      <small style="" class="small">Since 2011</small>
      <div class="clear"></div>
    </div>
  </div>
</html>

Answer 3

由于this stackoverflow answer 建议在引导4中将pull-right替换为float-right，因此请尝试使用它。

在引导程序主题中添加向右拉按钮

3 个答案: