Question

我有两个内联显示的自动宽度flexbox列。我希望在列中有动态内容，所以我试图想办法只包装包含菜单项的第一列。

我知道我可以使用＆＃34; flex-wrap＆＃34;来包装它们。关于＆＃34; d-flex＆＃34; div但我只想包装第一个自动宽度列，同时保持两列相互内联。

我使用的Bootstrap 4 CSS已包含我正在使用的Flexbox类，请参阅我提供的小提琴上的示例。

我想要的结果就像这个图像示例：

<div id="header-middle">
<div class="container">
    <div class="row align-items-center">
        <div class="header-middle-mobile-menu-outer col col-auto hidden-md-up">
            <a class="header-middle-mobile-menu-toggle">
                <i class="fa fa-bars"></i>
            </a>
        </div>
        <div class="logo-outer col col-auto">
            <div class="logo-image">
                <a href="#">
                    <img src="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiamcGxuM3VAhUTwWMKHVWaBgMQjRwIBw&url=http%3A%2F%2Fwww.freepik.com%2Ffree-vector%2Flogo-sample-text_701628.htm&psig=AFQjCNEHXsgvhjDI__g4Vk4GETXnCeRu6A&ust=1502481095339508">
                </a>
            </div>
        </div>
        <div class="d-flex col pl-0 pr-0 align-items-center justify-content-end justify-content-md-start">
            <div class="flex-wrap header-middle-menu-outer col col-auto hidden-sm-down">
                <nav class="header-middle-menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Sample Page</a></li>
                        <li><a href="#">Terms and Conditions</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </nav>
            </div>
            <div class="header-middle-social-media-icons-outer col col-auto">
                <nav class="header-middle-social-media-icons text-center icons-circle icons-sm">
                    <ul class="social-media-icons">
                        <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#" target="_blank"><i class="fa fa-envelope"></i></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

两个自动宽度flexbox列，只有一个包装

0 个答案: