初始崩溃最初显示/隐藏

我在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按钮，但这是一个很好的答案。 –

初始崩溃最初显示/隐藏

回答

相关问题