按钮在桌面上看起来很棒；在移动设备上不太好（引导程序 4）答案

【问题标题】：Buttons look great on desktop; not so great on mobile (Bootstrap 4)按钮在桌面上看起来很棒；在移动设备上不太好（引导程序 4）
【发布时间】：2020-01-02 12:14:37
【问题描述】：

我完全是编码新手，我的任务是重新设计我学校的网站。

我在某些页面上使用按钮进行导航，虽然它们在桌面上看起来不错，但在移动设备上看起来就像垃圾一样。我怎样才能让它们看起来更好？至少它们之间有一些填充物，这样它们看起来就不会像彼此的延续？

Desktop

Mobile

我正在使用这个模板： https://colorlib.com/wp/template/appetizer/

这是我的代码：

<div class="container-fluid">   
    <div class="col-md-12 col-sm-12 text-center ftco-animate">
        <h1 class="mb-4 mt-5"></h1>
        <p>
            <a href="#history" class="btn btn-primary p-3 px-xl-4 py-xl-3">History</a> 
            <a href="#almamater" class="btn btn-primary p-3 px-xl-4 py-xl-3">Alma Mater</a>
            <a href="#fightsong" class="btn btn-primary p-3 px-xl-4 py-xl-3">Fight Song</a>
            <a href="#missionstatement" class="btn btn-primary p-3 px-xl-4 py-xl-3">Statements</a>
            <a href="#admin" class="btn btn-primary p-3 px-xl-4 py-xl-3">Meet Our Administration</a>
            <a href="index.html#principalsmessage" class="btn btn-primary p-3 px-xl-4 py-xl-3">Message From the Principal</a>

        <p>
            <a href="academics/faculty.html#facultydirectory" class="btn btn-primary p-3 px-xl-4 py-xl-3">Faculty and Staff Directory</a> 
            <a href="resources/NHS_Student_Handbook_revision20192020.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Student/Parent Handbook&nbsp; <img src="images/downloadarrow.png"></a> 
            <a href="resources/NorthshoreHigh17-18SIP.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">School Improvement Plan&nbsp;<img src="images/downloadarrow.png"></a> 
            <a href="resources/Traffic Map and Instructions.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Traffic Map&nbsp;<img src="images/downloadarrow.png"></a> 
            <a href="resources/Campus_Map.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Campus Map&nbsp;<img src="images/downloadarrow.png"></a>  



        <p>
            <a href="resources/Campus_Tour.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Campus Tour &nbsp;<img src="images/downloadarrow.png"></a> 
            <a href="resources/Map to SLU.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Map to SLU for Graduation&nbsp; <img src="images/downloadarrow.png"></a> 
        </p>

    </div>
</div>

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

这些按钮尺寸非常适合桌面，但不适合移动视图。我建议您将按钮设置为size responsive，并在不同的viewport 中对齐。这是您可以应用于布局的示例 - https://www.codeply.com/go/FoEUO7XCDU

【讨论】：

嗨，Saurav，感谢您这么快回来。那么，为了澄清，我应该采取哪些步骤？我尝试仅将 codeply 中的 css 添加到我的 style.css 文件中，但没有成功。我在 6 月份才开始学习编码，所以你得像我五岁一样解释它。
哦等等，我想我看了这个之后明白了：stackoverflow.com/questions/19934647/… 我将媒体查询添加到我的 css，然后 btn 响应我的按钮，看起来它正在工作？这是好事还是您可以预见到任何问题？
啊伙计。我说得太早了。我只将它应用于喜欢...三个按钮并且它正在工作，所以我很兴奋。将其应用于其余部分，使它们变小，但仍将它们弄脏。
尝试为按钮提供上边距。作为临时 css 你可以试试.btn-primary {margin-top: 10px;}
效果很好。谢谢！不过，为什么是临时的？