html - 响应式标题的问题

Question

我在尝试制作标题 Logo 时遇到了一些问题，链接会宣布我的报告并向我发送警报，如本 page 所示将尺寸重新调整为此图片中显示的尺寸 here .

当浏览器使用媒体查询调整大小时，我尝试调整链接的边距和填充，但我似乎无法让链接保持在同一行上，而且我似乎也无法获得第一个链接公告我的报告向左浮动，以便在调整大小时从右到边。关于如何将其调整为适合移动布局的尺寸，有什么建议吗？

HTML

<div class="row">
  <div class="col-md-12">
      <div class="logo" style="float:left"> <a href="http://www.reportalert.info/">
       <img src="images/nra/ra-logo.png" />
        </a> </div>
      <div id="utils-red" align="right"> <a class="announce_red" href="/announce">announce my report</a> <a class="sendalerts_red" href="/signup">send me alerts</a> </div>
    </div>
</div>  

CSS

#utils-red
{
float:right;
margin:55px 0 0 0;
color:#fff;
font-family: 'RBNo21a-BlackDEMO';
font-size:23px;
text-decoration:none;
letter-spacing:1px;
text-align:center;
height:37px;
font-variant:small-caps;
}

a.announce_red, a.sendalerts_red
{
clear:both;
background:url(/images/nra/ra-red-action.png) left repeat-x;
background-position: 0 -35px;
padding:5px 20px;
text-decoration:none;
margin:0 0 0 20px;
outline:none;
}
a.announce_red:hover, a.sendalerts_red:hover
{
background-position:0 0;
text-decoration:none;
padding:5px 20px;
outline:none;
}

预先感谢您的帮助。

Answer 1

你可以在你的样式中添加这样的东西:

@media only screen and (max-width: 700px) {
    #utils-red {float: none;}
    a.announce_red, a.sendalerts_red {margin: 0 20px 0 0;}
}