Question

为什么我今天写求助有两个主要问题。如您所见，弹出窗口包装在文本旁边的列中。因此，我希望预览是右侧的Text1（弹出框）和405，因为它具有float-right属性。现在，我不明白为什么它不在应该显示的位置旁边并显示在“ Text1”的顶部。

第二，如何添加Popover边框阴影？

关于，比尔

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

Popover边框阴影和对齐问题

1 个答案: