Bootstrap：两行而不是一行的文本

Posted 2023-03-05

【中文标题】Bootstrap：两行而不是一行的文本

【英文标题】：Bootstrap : text on two lines instead of one

【发布时间】：2021-11-06 00:59:33

【问题描述】：

早上好，

我使用 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=""  target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href=""  target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href=""  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=""  target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href=""  target="_blank">some text</a></li>
                    <li><i class="fa fa-angle-right pr-2"></i> <a href=""  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 l&eacute;gales</h4>
            <ul class="list-unstyled">
                <li><i class="fa fa-angle-right pr-2"></i> <a href=""  target="_blank">some text</a></li>
                <li><i class="fa fa-angle-right pr-2"></i> <a href=""  target="_blank">some text</a></li>
                <li><i class="fa fa-angle-right pr-2"></i> <a href=""  target="_blank">some text</a></li>
                <li><i class="fa fa-angle-right pr-2"></i> <a href=""  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=""  target="_blank"><i class="fa fa-twitter-square fa-3x mr-3"></i></a>
            <a href=""  target="_blank"><i class="fa fa-linkedin-square fa-3x mr-3"></i></a>
            <a href=""  target="_blank"><i class="fa fa-instagram fa-3x"></i></a>
        </div>
        
    </div>
</div>

这可能吗？

谢谢！！

【问题讨论】：

我认为这是不可能的，因为您的 Bootstrap col- 规则将列宽确定为 50%

似乎是个问题，是的，好吧，对我来说太糟糕了，我会忍受它^^谢谢亚当！

【参考方案1】：

这是不可能的，因为您使用引导程序预定义类 col- 来调整宽度。 如果您想将两行文本转换为一个类，您的文本将被剪切 只能不使用 Bootstrap 类，您对所有列使用自定义宽度

【讨论】：

您好，谢谢您，这就是我的怀疑！我会想办法做到这一点。