Bootstrap文本不会低于文本

Question

我有以下列表，我已经尝试了一切让它看起来像“其他电话号码格式”，但它总是在它前面，如图所示。我需要做些什么才能让它低于文本？

    <div class="row">
        <h4 th:text="|Other phone number formats for ${phoneNumber}|"></h4>

        <ul class="list-group">
            <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Cras
                justo odio</li>
            <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Dapibus
                ac facilisis in</li>
            <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Morbi
                leo risus</li>
            <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Porta
                ac consectetur ac</li>
            <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Vestibulum
                at eros</li>
        </ul>
    </div>

Answer 1

    <div class="row justify-content-center">
            <h4 class="text-center" th:text="|Other phone number formats for ${phoneNumber}|"></h4>
          <div class="col-xl-12">
            <ul class="list-group">
                <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Cras
                    justo odio</li>
                <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Dapibus
                    ac facilisis in</li>
                <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Morbi
                    leo risus</li>
                <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Porta
                    ac consectetur ac</li>
                <li class="list-group-item" th:text="${formatPhoneNumberNoDash}">Vestibulum
                    at eros</li>
            </ul>
          </div>
        </div>

您可以在此处详细了解：https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment

希望这有帮助。