初始崩潰最初顯示/隱藏

我在Angular應用上練習Bootstrap 3。初始崩潰最初顯示/隱藏

對於某些按鈕，我希望它們在手機上打開網頁時隱藏自己，並在筆記本電腦上打開網頁時顯示它們。

據我所知，類navbar-collapse確實有助於做這項工作，但它也包含其他格式化樣式，這些樣式會改變我的按鈕外觀，這是我不喜歡的。我知道使用!important來覆蓋可以工作，但我不認爲這是一個正確的方法。

此外，從引導指示，我知道

collapse隱藏內容

collapse in顯示內容

但儘管如此，它只能設定的2種原始狀態之一。

因此，我的問題是：

我可以設置顯示/隱藏摺疊按鈕根據窗口寬度是多少？
我可以不用在@Media ..
我用普通ngClass很多CSS的變化？我可以使用Angular獲得窗口寬度嗎？

謝謝!!

我的簡化代碼的位置：

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".moreOptions" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <strong><u> Show Options </u></strong> 
    </button> 
</div> 
<div> 
    <button type="submit" class="btn btn-default collapse in moreOptions" (click)="doSomething()"> 
      DoSomething 
    </button> 
</div>

*：我使用.moreOptions不#moreOptions因爲我在網頁的不同部分的多個選項。

我嘗試了通過繼續使用navbar-collapse，而我加滿.btn到我的CSS文件來覆蓋相關的樣式。

.btn { 
    display: inline-block; 
    padding: 6px 12px; 
    margin-bottom: 0; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 1.42857143; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    -ms-touch-action: manipulation; 
    touch-action: manipulation; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    background-image: none; 
    border: 1px solid transparent !important; 
    border-radius: 4px; 
    border-color: #ccc !important; 
    width: inherit !important; 
}

這不起作用，因爲這些!important參數在摺疊時需要更改。

來源

2017-07-19 Charles Zha

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/這是系統啓動時進行，但引導3也有這種類 – pethel

您可以發佈您的代碼，所以我們可以看到爲什麼你的嘗試不工作？對於我所閱讀的，「@ media」查詢是要走的路，你不需要Angular。如果你這樣做，是的，獲得窗口寬度與'window.innerWidth'無關。 –

你可以用純CSS做到這一點，從這裏http://getbootstrap.com/css/#responsive-utilities ex添加類。

實際上，最後我通過繼續使用navbar-collapse來完成它，而我在我的css文件中添加了一部分.btn以覆蓋相關的樣式。

.btn { 
    padding: 6px 12px; 
    margin-bottom: 0; 
    font-size: 14px; 
    font-weight: normal; 
    vertical-align: middle; 
    border: 1px solid transparent !important; 
    border-radius: 4px; 
    border-color: #ccc !important; 
    width: 100%; 
}

如果還有其他方法，請不要猶豫，在這裏發表。謝謝！

來源

2017-07-19 21:27:41

嘗試使用引導CSS的類，他們幫助解決這類問題。

你有類如hidden-xs或visible-xs這將幫助你。

檢查Bootstrap documentation about this matter

來源

2017-07-20 06:32:48 DMC19

雖然它不適用於Bootstrap' collapse按鈕，但這是一個很好的答案。 –

初始崩潰最初顯示/隱藏

回答

相關問題