javascript - ios、safari 设备上的 Bootstrap popover 对齐问题

Question

我用过bootstrap popover向用户显示提示消息。它适用于 Windows、Android 设备。但是对于 ios 和 safari 设备，内容排在第二行。请检查图像并尝试帮助我。我尝试了很多方法来更改 CSS，但无法解决问题。

页面上有多个popover。如果用户想要关闭，则他们必须单击每个弹出窗口的关闭按钮。这就是要求。这就是我使用 javascript 添加关闭按钮的原因。

<div id="hoverforlanguage"> 
  <span class="editbtnprofilea color5 nopadd padtop10 shwmobileedit" data-toggle="modal" data-target="#languagesmodal"><i class="fa fa-pencil fa-lg" aria-hidden="true"></i></span>
  <h4 class="control-label bold color2">Languages</h4>
  <hr class="hidden-print backgroundcolor2">
</div>

.popover-content{
  font-family: 'Caveat', cursive;
  font-weight: bold;
  font-size: large;
  padding: 0px 5px;
}
.button.close{
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0
}
.close{
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2
}

$(document).ready(function() {
  $('#hoverforlanguage>.editbtnprofilea').popover({ 'placement':'right', html: 'true','content':'<button type="button" id="close" class="close" onclick="$(&quot;#hoverforlanguage>.editbtnprofilea&quot;).popover(&quot;hide&quot;);$(&quot;#hoverforlanguage&quot;).find(&quot;.editbtnprofilea&quot;).hide();">&times;</button><span style="float: left;">Add Languages </span>' }).popover('show').on('click',function(){ $(this).popover('hide'); 
  });
});

Answer 1

好吧，根据您要求的结果，这里有一些解决方案 - 我只能想象它们会起作用，没有可用的代码无法测试它们。

a) 文本顶部的关闭按钮:

.close {
  position:absolute;
  z-index:2
  top:10px;
  right:10px;
}

b) 文字环绕:

.popover {
  white-space:normal;
}
.close {
  float:right;
}
.popover span {
  float:none; // only writing this because you have float applied
}

c) 看起来在 ios 上 font-size 稍微大一点，所以你也可以尝试:

.popover {
  font-size:0.8em; // Trial and error size
}