徽標問題/挑戰 - Bootstrap導航欄

我被困在徽標的一小部分上，試圖使用Bootstrap的導航欄製造不同的東西。我想要實現的是徽標的邊框底部半徑爲50px！（幾乎四捨五入），其他所有角落都是正方形。這裏的問題是標誌div的左邊和下邊部分被切掉，因爲它是在一個容器內部，試圖將該標誌放在容器外面，並且使用媒體查詢並試圖達到我想要的效果，但目前爲止沒有。徽標問題/挑戰 - Bootstrap導航欄

Example

是可能的？我試圖把這個標誌放在導航欄外面，並給它一個10％的填充剩下的部分，以便將標誌推到容器的起始位置，但我覺得不是那麼好的技術。甚至試圖加入第二格，並試圖填補

我做了Codepen一個小例子 - Example

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

來源

2015-03-13 mstroiu

實際上有兩兩件事：

如果我理解正確的，你需要在左側底角也要四捨五入。在這種情況下，您還需要添加border-bottom-left-radius: 50px;
如果是這樣，則引導程序添加到其導航品牌中的負邊距會出現問題，因此您需要覆蓋該邊距。
```
.site-logo .navbar-brand { 
    margin-left: 0 !important; 
} 
```

Here's the updated codepen（我做的紅色背景，看看它更好）

來源

2015-03-13 18:56:36 Caelea

謝謝您立即作出反應，是的，你明白正確的，但同樣，我的解釋是不壞，是非常糟糕。我真正想要的是左側的空間填充相同的背景顏色。這裏是一個例子 - http://i.imgur.com/daOxzOY.png。我要更新codepen。 http://codepen.io/anon/pen/Eadzyg – mstroiu 2015-03-13 19:38:12

在更新後的codepen中，我添加了一個div，絕對位置，左對齊，最大寬度，但是當我重新調整窗口大小時，它會變得雜亂，但我想最終我可以使用媒體查詢來解決這個問題。我在這裏的主要問題是我正在尋找更好的技術，而不是爲每個斷點修改div css。我一直在尋找有100％寬度或自動流體的東西。謝謝你的想法。 Multumesc – mstroiu 2015-03-13 19:51:59

@MarianStroiu實際上你可以使用calc函數和媒體查詢。看看更新後的codepen，用這個你不需要額外的div，但是IE8不支持calc函數http://codepen.io/anon/pen/XJxQwb 你基本上做的是計算標誌容器的寬度按以下公式計算：100％減去容器寬度，這是您需要使用媒體查詢的位置，對於容器所需的每個寬度 – Caelea 2015-03-16 10:20:30

徽標問題/挑戰 - Bootstrap導航欄

回答

相關問題