Блог

Доброе утро,

Я использую Bootstrap 4.5 и пытаюсь сделать красивый нижний колонтитул для своего университетского сайта. Я использую это :

 <div class="container-fluid d-flex justify-content-center">
 

Для того, чтобы мой нижний колонтитул был по центру, а блоки не находились далеко друг от друга.

Но на большом экране (я эмулировал его с помощью Firefox) текст состоит из двух строк из-за опции центрирования, и я хотел бы быть в одной строке, потому что в ней было место :

Вот полный код, если это может быть полезно :

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid d-flex justify-content-center">
    <div class="row">
    
        <div class="col-lg-4 col-md-6 col-12 pb-5">
            <h4 class="text-center">some text</h4>
            
            <div class="d-flex justify-content-between align-items-center">
                <a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
                    <span><i class="fa fa-chevron-right pr-2"></i>some text some text sometext sometextsome text</span>
                </a>
                <span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i></span>
            </div>
            
            <div id="footer_ups" class="collapse pl-3" aria-labelledby="some text">
                <ul class="list-unstyled">
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                </ul>
            </div>
            
            <div class="d-flex justify-content-between align-items-center">
                <a href="#" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
                    <span><i class="fa fa-chevron-right pr-2"></i>some text sometextsome text</span>
                </a>
                <span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
            </div>
            
            <div id="footer_ipp" class="collapse pl-3" aria-labelledby="some text">
                <ul class="list-unstyled">
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                </ul>
            </div>
            
            <br />
            <i class="fa fa-chevron-right pr-2"></i><a href="" target="_blank">some textsome textsome textsome texttextsome textsome text</a>
        </div>
        
        
        <div class="col-lg-4 col-md-6 col-12 pb-4">
            <h4 class="text-center">Aide et Informations lamp;eacute;gales</h4>
            <ul class="list-unstyled">
                <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
                <li><i class="fa fa-angle-right pr-2"></i> <a href="" alt="" target="_blank">some text</a></li>
            </ul>
        </div>
        
        <div class="col-lg-4 col-md-12 text-center">
            <h4 class="text-center">Suivez-nous</h4>
            
            <a href="" target="_blank"><i class="fa fa-facebook-square fa-3x mr-3"></i></a>
            <a href="" alt="" target="_blank"><i class="fa fa-twitter-square fa-3x mr-3"></i></a>
            <a href="" alt="" target="_blank"><i class="fa fa-linkedin-square fa-3x mr-3"></i></a>
            <a href="" alt="" target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
        </div>
        
    </div>
</div>
 

Возможно ли это ?

Спасибо!!

Это невозможно, потому что вы использовали bootstrap для предварительного определения класса col- для регулировки ширины.
Если вы хотите преобразовать текст из двух строк в один класс, ваш текст будет обрезан
, можно только не использовать класс начальной загрузки, вы используете пользовательскую ширину для всех столбцов