弹出框边框阴影和对齐问题

Question

我今天写信寻求帮助有两个主要问题。如您所见，弹出框包含在文本旁边的列中。所以预览我希望是某人的东西 Text1(弹出框(和右侧的 405，因为它具有浮动权限。现在我不明白为什么它没有出现在它应该出现的地方旁边并显示在"Text1"的顶部。

其次，如何添加弹出边框阴影？

问候法案

// Bootstrap Popover
$('[data-toggle="popover"]').popover({
  trigger: 'focus'
})

.popover-holder .popover {
  background: #f3f3f3;
  border: 1px solid rgb(235, 235, 235);
  border-radius: 50%;
  color: #737373;
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: 9;
}
.popover-questionmark {
  margin: -2px 0px 3px 3px;
  font-size: 12px;
}
.popover:focus {
  outline: none;
}

    <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<center>
<div class="col-9 pl-0 float-left">
  <div class="float-left">Text1</div>
    <div class="popover-holder">
      <a tabindex="0" class="popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="Hello World"><span class="popover-questionmark">?</span></a>
  </div>
</div>
<div class="col-3 float-left">
  <div class="checkout-total-trip float-right">405</div>
</div>
</center>

Answer 1

首先，将整个column div元素包装在row div元素中。您无需使用absolute位置将内容粘贴在文本旁边，只需添加display属性即可。尝试下面的代码 -

// Bootstrap Popover
$('[data-toggle="popover"]').popover({
  trigger: 'focus'
})

.text-div,
.popover-holder {
  display: inline-block;
}
.popover-holder .popover {
  background: #f3f3f3;
  border: 1px solid rgb(235, 235, 235);
  border-radius: 50%;
  color: #737373;
  position: relative;
  width: 15px;
  height: 15px;
  z-index: 9;
}
.popover-questionmark {
  margin: -2px 0px 3px 3px;
  font-size: 12px;
}
.popover {
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
}

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-9">
    <div class="text-div">Text1
      <div class="popover-holder">
        <a tabindex="0" class="popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="Hello World"><span class="popover-questionmark">?</span></a>
      </div>
    </div>
  </div>
  <div class="col-3">
    <div class="checkout-total-trip float-right">405</div>
  </div>
</div>