我确定这个问题对任何人都不是新的。
我有一个标准的三列布局，每个列都有一个标题，一个正文和几个按钮。我的问题是按钮。当视口中的第二列大于而不是768px时，它们会水平排列。我使用的是HTML <br>，我觉得这不是专业/高效的。但我希望找到一种更好的方法来让按钮在不同的视口中对齐水平。我觉得我比这更难实现。请参阅页面并更改768px以下的视口以查看我的意思。这是我的意思是：
http://mpactchurches.com/growth-track-downloads/
任何想法？如果被问过一百万次，请原谅我！
见下面的代码：
<div class="container-fluid">
<div class="row" id="gallery">
<div style="margin-top:2%;"></div>
<div class="col-xs-12"> <p> Manna Church has made it's complete Growth Track available for download, free of charge. Feel free to download individual sessions or whole packages as needed.</p>
</div>
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-top: 8%;">
<h2 style="text-transform: uppercase;text-align: center;" ><span style="color:#f05a38;">First</span>Step</h2>
<p>FirstStep introduces the basic healthy habits essential to a fruitful walk with Jesus, and also discusses baptism and its importance. A four-week Small Group.</p>
<div style="padding-top: 3%;" class="text-center">
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/First+Step.zip" alt="Complete download"><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">Complete FirstStep Package (5.1 GBs)</button></a>
<hr>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/8.5x11_first+step.pdf" alt="FirstStep PDF"><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">FirstStep Booklet • 8.5 x 11 PDF</button></a><a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek1-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 1 download">
<button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 1 (1.1 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek2-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 3 download"><button type="button" class="btn btn-default" href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek2-Apple+Devices+HD+(Best+Quality).m4v" aria-label="Left Align" style="margin-bottom:10px;"> Week 2 (1.3 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek3-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 3 download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">Week 3 (1.2 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek4-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 3 download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">Week 4 (1.4 GBs)</button></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-top: 8%;">
<h2 style="text-transform: uppercase; text-align:center; margin-left: auto; margin-right: auto;" ><span style="color:#f05a38;">Next</span>Step</h2>
<p>Teach your members and attendees what your church is passionate about, where you're going, and how they can be part of that adventure. A four-week Small Group.</p><div style="padding-top: 3%;" class="text-center"><a href="https://s3.amazonaws.com/gt-downloads/NextStep/Next+Step.pdf" alt="Complete download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">Complete NextStep Package (6.6 GBs)</button></a>
<hr>
<a href="https://s3.amazonaws.com/gt-downloads/NextStep/8.5x11_+next+step.pdf" alt="NextStep PDF"><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">NextStep Booklet • 8.5 x 11 PDF</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/NextStep/NextStep+Pt+1-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 1 download"><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 1 (1.3 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/NextStep/NextStepPt2-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 2 download" ><button type="button" class="btn btn-default" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 2 (2.2 GBs) </button></a>
<a href="https://s3.amazonaws.com/gt-downloads/NextStep/Next+Step+Pt+3-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 3 download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 3 (1.5 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/NextStep/Next+Step+Pt+4-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 4 download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 4 (1.4 GBs)</button></a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4" style="margin-top: 8%;">
<h2 style="text-transform: uppercase;text-align: center;" ><span style="color:#f05a38;">Leader</span>Step</h2>
<p>Equip your church members to lead and influence others in their families, jobs, communities, and at church. An eight-week Small Group.<span style="color:#f05a38;">✱</span></p>
<div style="padding-top: 3%;" class="text-center">
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStep.zip" alt="Complete download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">Complete LeaderStep Package (11.3 GBs)</button></a>
<hr>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/8.5x11+leaders+step.pdf" alt="NextStep PDF"><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">LeaderStep Booklet • 8.5 x 11 PDF</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek1-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 1 download"> <button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">Week 1 (1.7 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek2-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 2 download" ><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 2 (1.4 GBs) </button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek3-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 3 download"> <button
class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">Week 3 (1.4 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek4-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 4 download"><button
class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 4 (1.6 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek5-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 5 download"><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 5 (1.2 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek6-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 6 download"><button class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 6 (1.0 GB) </button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek7-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 7 download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 7 (1.5 GBs)</button></a>
<a href="https://s3.amazonaws.com/gt-downloads/LeaderStep/LeaderStepWeek8-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 8 download"><button type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;"> Week 8 (1.2 GBs)</button></a>
<span class="text-center">
</div>
<div style="margin-top:10%;"></div>
<p><span style="color:#f05a38;">✱</span> We suggest that completion of NextStep and your church's membership application process be required before attending LeaderStep.</p>
</span>
</div>
<div style="margin-top:20%;"></div>
</div> <!-- END ROW -->
</div> <!-- END CONTAINER -->
<div class="container-fluid" >
<div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
<h2 style="text-transform: uppercase;text-align: center;" target="_blank" ><span style="color:#f05a38;">EDITABLE</span> FILES</h2>
<p>Need to customize your content? We have provided all our Growth Track content in an editable package so you can adjust everything to meet your church's needs.</p>
<div class="col-sm-12 text-center">
<div style="margin-top:5%;"></div>
<a href="https://drive.google.com/drive/folders/0BxpIAwsSdmG5Z3JtWmc0Nk15TmM?usp=sharing"><button type="button" class="btn btn-default" aria-label="Center Align"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Access Editable Files</button></a>
</div>
</div>
</div>
<div style="margin-top:30%;"></div>
答案 0 :(得分：0)
我不完全确定你想要什么，但我假设你希望它们在视口大于768px时垂直叠加。您可以将<a>放在<div>
这是第一步栏：
<div class="col-xs-12 col-sm-6 col-md-4" style="margin-top: 8%;">
<h2 style="text-transform: uppercase;text-align: center;"><span style="color:#f05a38;">First</span>Step</h2>
<p>FirstStep introduces the basic healthy habits essential to a fruitful walk with Jesus, and also discusses baptism and its importance. A four-week Small Group.</p>
<div style="padding-top: 3%;" class="text-center">
<div>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/First+Step.zip" style="margin-bottom:10px;" class="btn btn-default" alt="Complete download">
Complete FirstStep Package (5.1 GBs)
</a>
</div>
<hr>
<div>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/8.5x11_first+step.pdf" alt="FirstStep PDF" class="btn btn-default" type="button" class="btn btn-default" aria-label="Left Align" style="margin-bottom:10px;">FirstStep Booklet • 8.5 x 11 PDF</button>
</a>
</div>
<div>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek1-Apple+Devices+HD+(Best+Quality).m4v" class="btn btn-default" alt="Week 1 download" style="margin-bottom:10px;">
Week 1 (1.1 GBs)
</a>
</div>
<div>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek2-Apple+Devices+HD+(Best+Quality).m4v" class="btn btn-default" alt="Week 3 download" style="margin-bottom:10px;">
Week 2 (1.3 GBs)
</a>
</div>
<div>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek3-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 3 download" class="btn btn-default" style="margin-bottom:10px;">
Week 3 (1.2 GBs)
</a>
</div>
<div>
<a href="https://s3.amazonaws.com/gt-downloads/FirstStep/FirstStepWeek4-Apple+Devices+HD+(Best+Quality).m4v" alt="Week 3 download" class="btn btn-default" style="margin-bottom:10px;">
Week 4 (1.4 GBs)
</a>
</div>
</div>
</div>
您还应该停止在<button>内使用<a>，您始终可以将该类应用于锚标记本身