如何在引导程序中修改宽度答案

【问题标题】：How to modify width in bootstrap如何在引导程序中修改宽度
【发布时间】：2020-09-16 09:18:08
【问题描述】：

我需要以这种形式在我的网站中制作标题

1/左侧的徽标和名称

2/中间的链接

3/右侧社交媒体的标志

我有这个代码：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
    <a>    
    <img src="house.png" style="width:30px" />
      Les maisons</a>
    </div>
    <div class="mx-auto w-100 order-0">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">ACCUEIL</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">• CRÉATION des maisons </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">• ENTRETIEN des maisons </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">• CONTACT</a>
            </li>
        </ul>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-google-plus"></i></a>
            </li>
        </ul>
    </div>
</nav>

结果如下：

我需要做什么：

1/改变中间元素的宽度，使其成为内联

2/将导航设为白色并修改内部文本颜色

【问题讨论】：

好的。你有什么问题？
我需要在中间内联我的意思是不要在两行中制作元素
是什么阻碍了你这样做？
就像你在我的结果图像中看到的那样，当链接的文本很长时，文本被分成 2 行，我不知道如何拥有所有文本的宽度

标签： html css twitter-bootstrap

【解决方案1】：

更改 HTML 中的一些类

<nav class="navbar navbar-expand-md navbar-dark bg-dark justify-content-between">
    <div class="navbar-collapse collapse dual-collapse2">
    <a>    
    <img src="house.png" style="width:30px" />
      Les maisons</a>
    </div>
    <div class="mx-auto order-0">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link text-white" href="#">ACCUEIL</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="#">• CRÉATION des maisons </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="#">• ENTRETIEN des maisons </a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-white" href="#">• CONTACT</a>
            </li>
        </ul>
    </div>
    <div class="navbar-collapse collapse dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-twitter"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-facebook"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-google-plus"></i></a>
            </li>
        </ul>
    </div>
</nav>

https://jsfiddle.net/gqxtz1u4/

【讨论】：

【解决方案2】：

对导航中的所有元素使用 text-nowrap 类
删除元素中的 .navbar-dark

【讨论】：