按钮在桌面上看起来很棒，在移动设备上就不那么好了(Bootstrap 4)

Question

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

我在一些页面上使用按钮导航，虽然它们在桌面上看起来很好，但在移动设备上看起来就像垃圾。我怎么才能让他们看起来更好？至少在它们之间有一些填充，这样它们看起来就不像是彼此的跑步者？

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>

Answer 1

这些按钮大小对于桌面来说很棒，但是它们是而不是，对于移动视图来说非常棒。我会建议你让你的按钮在不同的viewport中对齐时使用size responsive。以下是可应用于您的布局的示例- https://www.codeply.com/go/FoEUO7XCDU