徽标 Issue/Challenge - Bootstrap 十一月

Question

我被徽标的一小部分卡住了，试图使用 Bootstrap 的导航栏做出一些不同的东西。我想要实现的是徽标的边框底部半径为 50 像素！ （几乎是圆形的），所有其他角都是方形的。这里的问题是徽标 div 的左侧和底部部分被剪切，因为它位于容器内部，试图将徽标放在容器外部，并使用媒体查询播放并尝试达到我想要的效果，但到目前为止还没有。

可能吗？我尝试将徽标放在导航栏之外，并给它一个 10% 的 padding-left 以将徽标推到容器开始的位置，但我觉得这不是很好的技术。甚至尝试添加辅助 div，并尝试填充

我在 Codepen 上做了一个小例子 - Example

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">

Answer 1

实际上有两件事：

1. 如果我没理解错的话，你需要把左下角也弄圆。在这种情况下，您还需要添加 border-bottom-left-radius: 50px;

2. 如果是这样，那是 bootstrap 添加到其导航栏品牌的负边距有问题，因此您希望将其覆盖。

   .site-logo .navbar-brand {
       margin-left: 0 !important;  
   }
   

Here's the updated codepen（为了更好看，我将背景设为红色）