Question

我想为移动视图分辨率添加br标签，如320px - 480px。我试过保证金顶部，底部但不起作用。所以请帮助我。

我想在这两个锚标签之间添加br标签。下面两个这样的标签。

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

Answer 1

您可以使用媒体查询

课程mobile已应用于<br />。当浏览器的width小于320px时，将应用媒体查询中的类并显示该元素。

.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>

Answer 2

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

Answer 3

你可以这样添加类到br：

.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>

Answer 4

使用＆＃34;媒体查询＆＃34;这里是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>

Answer 5

如果您使用bootstrap，您也可以执行简单的代码，在css中不需要任何自定义媒体类：

＆＃13;

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

＆＃13;

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

5 个答案: