如何垂直对齐 bootstrap 中的无序列表 4

Question

我正在尝试将无序列表标记与 bootstrap 4 垂直对齐。 class已尝试但无效的是 .justify-content-center .align-self-center

这是我的确切代码：

<div class="row">
<div class="col-xl-12">
  <div class="card">
     <div class="card-body">
        <div class="current-survey text-center">
           <h4>Question 1 of 5</h4>
           <h3 class="mt-3 mb--1">On a scale from 1 to 10, how happy are you at work?</h3>
           <!---->
        </div>
        <div class="choices mt-5">
           <ul class="list-inline text-center">
              <li class="list-inline-item labels"><span class="text-muted">about to quit</span></li>
              <li id="number_0" class="list-inline-item numberCircle"><span>1</span></li>
              <li id="number_1" class="list-inline-item numberCircle"><span>2</span></li>
              <li id="number_2" class="list-inline-item numberCircle"><span>3</span></li>
              <li id="number_3" class="list-inline-item numberCircle"><span>4</span></li>
              <li id="number_4" class="list-inline-item numberCircle"><span>5</span></li>
              <li id="number_5" class="list-inline-item numberCircle"><span>6</span></li>
              <li id="number_6" class="list-inline-item numberCircle"><span>7</span></li>
              <li id="number_7" class="list-inline-item numberCircle"><span>8</span></li>
              <li id="number_8" class="list-inline-item numberCircle"><span>9</span></li>
              <li id="number_9" class="list-inline-item numberCircle"><span>10</span></li>
              <li class="list-inline-item labels"><span class="text-muted">jumping with joy</span></li>
           </ul>
        </div>
        <!----> <!----> <!----> <!----> <!----> 
        <div class="row justify-content-center mt-3"><span class="text-muted skip" style="cursor: pointer;">Skip this question</span></div>
     </div>
  </div>

这是一个标签无序列表示例，我希望它垂直对齐并随着屏幕尺寸变小而做出响应。 click this link to show sample

class list-inline-item numberCircle` 是我想要垂直对齐的。

这是小屏幕的结果。基本上，我希望它在一个小视口上垂直重新对齐。 broken on smaller viewport

Answer 1

我认为这是您想要的答案。
使用 d-block 和 d-md-inline-block 更改列表项的 display 属性。
并使用 md 断点作为间距。
我用 mr-md-2 代替 d-md-inline-block.

.numberCircle {
    border-radius: 50%;
    width: 37px;
    height: 36px;
    padding: 8px;
    
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    
    font: 15px Arial, sans-serif;
    font-weight: 600;
}
.numberCircle:hover {
    background-color: #8898aa;
    color: #fff;
    border: 2px solid #8898aa;
    cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
                <div class="current-survey text-center">
                    <h4>Question 1 of 5</h4>
                    <h3 class="mt-3 mb--1">On a scale from 1 to 10, how happy are you at work?</h3>
                    <!---->
                </div>
                <div class="choices mt-5">
                    <ul class="list-inline text-center">
                        <li class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 labels"><span class="text-muted">about to quit</span></li>
                        <li id="number_0" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>1</span></li>
                        <li id="number_1" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>2</span></li>
                        <li id="number_2" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>3</span></li>
                        <li id="number_3" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>4</span></li>
                        <li id="number_4" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>5</span></li>
                        <li id="number_5" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>6</span></li>
                        <li id="number_6" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>7</span></li>
                        <li id="number_7" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>8</span></li>
                        <li id="number_8" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>9</span></li>
                        <li id="number_9" class="d-block d-md-inline-block mx-auto mb-2 mr-md-2 mb-md-0 numberCircle"><span>10</span></li>
                        <li class="d-block d-md-inline-block labels"><span class="text-muted">jumping with joy</span></li>
                    </ul>
                </div>
                <!----> <!----> <!----> <!----> <!----> 
                <div class="row justify-content-center mt-3"><span class="text-muted skip" style="cursor: pointer;">Skip this question</span></div>
            </div>
        </div>
    </div>
</div>

如何垂直对齐 bootstrap 中的无序列表 4

how to vertically align unordered list in bootstrap 4

html

css

bootstrap-4