Тень границы всплывающего окна и проблема с выравниванием

Есть две основные проблемы, почему я пишу сегодня о помощи. Как видите, всплывающее окно заключено в столбец рядом с текстом. Таким образом, предварительный просмотр, как я ожидаю, будет кем-то вроде Text1 (всплывающее окно) и 405 справа, потому что у него есть свойство float-right. Теперь я не понял, почему он не идет рядом с тем, где он должен быть, и отображается в верхней части «Текст1».

Во-вторых, как добавить тень границы 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>

html css twitter-bootstrap

28.03.2019 12:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

487

Ответы 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>

Позиция: absolute загружается по умолчанию через бутстрап. Как мне это удалить? И я искал только бордюрную тень, что-то вроде этого: prntscr.com/n450wr

— 28.03.2019 13:52

Я обновил свой ответ. Кроме того, вы можете заменить любой CSS своим собственным.

— 29.03.2019 04:58

И, наконец, как удалить цвет границы и оставить только тень границы?

— 31.03.2019 18:09

Если вы хотите сделать границу прозрачной, просто добавьте CSS border-color: transparent, а для тени вы можете использовать свойство box-shadow.

— 01.04.2019 05:50

цвет границы: прозрачный не работает. Можете ли вы заставить это работать во фрагменте, пожалуйста?

— 01.04.2019 11:45

попробуйте использовать border-color:none

— 01.04.2019 13:12

Все еще не работает. Я перепробовал почти все, и поэтому я вернулся к вам за решением.