Question

我正在使用bootstrap 4，我正在尝试将列表样式图像与列表样式文本对齐。

到目前为止我的html：

＆＃13;

li.nav-item {
  color: #fff;
  margin: 15px 0px;
  list-style-image: url("../img/circle.png");
  background-repeat: no-repeat;
  list-style-position: left top;
  margin-left: 25px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active">Text here text here text here</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Text here text here text here</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Text here text here text here</a>
  </li>
  <li class="nav-item">
    <a class="nav-link">Text here text here text here</a>
  </li>
</ul>

＆＃13;

我试图使用垂直对齐但它没有用。还要玩填充和边距。请帮忙！

Answer 1

我不知道list-style-image，但你应该试试这个：

li.nav-item {
    color: #000;
    margin: 15px 0px;
    list-style: none;
    background: url(https://www.w3schools.com/cssref/sqpurple.gif) left center no-repeat;
    padding-left: 5px;
    background-repeat: no-repeat;
}

如何将list-style-image与Bootstrap

1 个答案: