我正在嘗試將無序串列標簽與引導程式 4 垂直對齊。已經嘗試過類，但無法正常作業 .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>
這是一個標簽無序串列的示例，我想垂直對齊并隨著螢屏尺寸變小而做出回應。 單擊此鏈接以顯示示例
類 list-inline-item numberCircle` 是我想要垂直對齊的。
這就是小螢屏的結果。基本上，我希望它在一個小視口上垂直重新對齊。在較小的視口上損壞
uj5u.com熱心網友回復：
我想這是你想要的答案。
使用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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348948.html
標籤：html css bootstrap-4