在移动设备或特定分辨率下添加<br>标签

Question

我希望在移动端（分辨率为320px-480px）中添加br标签。我尝试过使用margin-top和margin-bottom，但没有起作用。请帮助我。

我想在这两个锚点之间添加br标签，就像下面这两个a标签所示。

<a class="ww" href="counseller.html">Career Counsellor</a> 
<a class="xx" href="mentors.html"> Career Mentor</a>

- Dnyan

---

你可以使用@media来显示<br />... - Sam Teng Wong

Answer 1

你可以使用媒体查询。 类名“mobile”被应用于
。当浏览器窗口的宽度小于320像素时，媒体查询内的类将被应用并显示该元素。

.mobile {
  display: none;
}
@media (max-width: 320px) {
  .mobile {
    display: block;
    /* Add other properties here */
  }
}

<a class="ww" href="counseller.html">Career Counsellor</a>
<br class="mobile" />
<a class="xx" href="mentors.html"> Career Mentor</a>

- Tushar

Answer 2

另一种方法是不使用<br />标签，而是应用块视图属性，并在移动设备上使用媒体查询仅对a类应用边距！这样你就不需要添加额外的br标签，以后处理起来会更容易。

- Lukas Valatka

Answer 3

如果您使用Bootstrap，您也可以编写简单的代码，而无需在CSS中使用任何自定义媒体类，就像这样：

<a class="ww"  href="counseller.html">Career Counsellor</a>
<br class="visible-xs"/>
<a  class="xx"  href="mentors.html"> Career Mentor</a>

- Piotr Sikora

Answer 4

你可以通过给br添加class来实现，代码如下：

.my-class{
    display: none;
}
@media screen and (min-width: 480px) {

    .my-class{
        display: inline-block;
    }
}

并在您的<a>之间添加br标签，就像这样：

<a class="ww"  href="counseller.html">Career Counsellor</a>
<br class="my-class"/>
<a  class="xx"  href="mentors.html"> Career Mentor</a>

- Kristijan Iliev

---

媒体查询应该移动到开放类之下，否则 display: none 将会一直被应用。 - Tushar

你正在使用 min-width，这意味着当浏览器的宽度大于480像素时，媒体查询将被应用，而这不是 OP 想要的。 - Tushar

Answer 5

在这里使用“媒体查询”CSS代码

.m_br {display:none}
@media screen and (min-witdh : 380px){
    .m_br{
        display:block
    }
}

以及 HTML 代码

<a class="ww" href="counseller.html">Career Counsellor</a>
<!-- add class m_br -->
<br class="m_br"> 
<a class="xx" href="mentors.html"> Career Mentor</a>

- bothsa24312