在移动视图中隐藏html按钮_Html_Css_Twitter Bootstrap_Responsive Design_Media Queries

在移动视图中隐藏html按钮

html css twitter-bootstrap responsive-design

在移动视图中隐藏html按钮,html,css,twitter-bootstrap,responsive-design,media-queries,Html,Css,Twitter Bootstrap,Responsive Design,Media Queries,我的网页上有一个按钮，可以将用户带到页面的下一部分。我想在移动视图中隐藏该按钮，但我无法找到适合它的css JSFIDDLE代码： Html代码： <section> <a href="#main" class="scroll-down" address="true" class="text-right hidden-md"></a> </section> 使用@media screen如何？只需使用以下内容： @media (max-width

我的网页上有一个按钮，可以将用户带到页面的下一部分。我想在移动视图中隐藏该按钮，但我无法找到适合它的css

JSFIDDLE代码：

Html代码：

<section>
<a href="#main" class="scroll-down" address="true" class="text-right hidden-md"></a>
</section>

使用@media screen如何？

只需使用以下内容：

@media (max-width: 600px) {
  .scroll-down {
    display: none;
  }
}

使用隐藏按钮所需的宽度

更新的fiddle here：只需调整可见区域的大小，然后您将看到它如何显示/隐藏按钮

因为您使用的是引导，您可以在不使用自定义CSS的情况下执行此操作，如下所示：

<section class="d-none d-md-block">
  <a href="#main" class="scroll-down" address="true" class="text-right"></a>
</section>

将d-md-block更改为最适合您需要的断点和显示类型。有关可用选项，请参阅。

您正在查找CSS@media查询

第一步是将视口标记放在HTML中：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

您可以将最大宽度：768px更改为所需的像素数；基本上，当屏幕宽度小于指定的数量时，将使用查询中的CSS，其优先级高于其他CSS

尝试调整浏览器的大小，看看它是否工作。

在Bootstrap 3中，您可以像这样使用Bootstrap：

<section >
    <a href="#main" class="scroll-down text-right hidden-xs" address="true"></a>
</section>

在Bootstap 4中：

你正在使用引导。您不需要定制css。请参阅下面我的答案。对于小于中等断点的所有内容，它都将显示“无”。因此，它将根据您的要求隐藏在手机上。不过，最好将显示类放在而不是上。我会更新我的答案。我想我误解了你的意思。您是否希望按钮不可见，但仍保持功能？我希望它仅在移动视图中隐藏。我收到了答案，但非常感谢你的帮助。我真的很感激。是的，Bootstrap 4中也提供了…看一看

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

@media only screen and (max-width: 768px) {
  .scroll-down {
    display: none;
  }
}

<section >
    <a href="#main" class="scroll-down text-right hidden-xs" address="true"></a>
</section>

<section >
    <a href="#main" class="scroll-down text-right hidden-xs-down" address="true"></a>
</section>