引导导航设计答案

【问题标题】：Bootstrap nav design引导导航设计
【发布时间】：2019-04-11 19:26:45
【问题描述】：

有谁知道如何在导航的引导程序中实现这一点？左侧是徽标，右侧是导航。

我猜你是用 col 和一些 css 吗？

【问题讨论】：

显示你的代码和到目前为止你尝试过的内容......以及什么版本的引导程序
巧合的是，我昨天正在做与此非常相似的事情，但我看不到 Bootstrap 做任何事情，只是妨碍了。
@לבנימלכה 我还没有尝试过，因为我无法弄清楚它的逻辑。
@Quentin 我相信您可以使用带有 col-4 和 col-8 的行，并可能更改每个 col 的背景颜色，但中间的斜线我无法理解
@Jenova1628 — 使用剪辑路径相当简单，但是关于如何处理列的 Bootstrap 约定阻碍了。

标签： html css twitter-bootstrap

【解决方案1】：

我设法创建了我想要的部分，我正在使用的代码是：

CSS：

.menu {
background-color: lightblue;
overflow: hidden;
background-color:white;
}

.menu:after {
content: "";
border-bottom: 850px solid transparent;
border-right: 400px solid #0055b7;
position: absolute;
left: 80%;
top: 0;
}

.nav-menu ul {
list-style: none;
display: inline-flex;
}

.nav-menu ul li {
padding: 40px;
}

.blue-bg {
background-color: #0055b7;
}

HTML：

 <div class="container-fluid">
                    <div class="row">
                      <div class="menu col-md-5">
                          <img class="paddingHeader" src="assets/images/headerlogo.png" /> 
                      </div>
                      <div class="content col-md-7 blue-bg">
                        <div class="nav-menu">
                              <ul>
                                <li><a class="text-white" href="">Home</a></li>
                                <li><a class="text-white" href="">About Us</a></li>
                                <li><a class="text-white" href="">Properties To Let</a></li>
                                <li><a class="text-white" href="">We Buy Houses</a></li>
                                <li><a class="text-white" href="">Contact Us</a></li>
                              </ul>
                        </div>
                      </div>
                    </div>
                  </div>

【讨论】：