Ayuda en la programación, respuestas a preguntas / Html / Obtenga los botones de Bootstrap 3.7 para alinear horizontalmente - html, wordpress, twitter-bootstrap, twitter-bootstrap-3, alineación

Obtenga los botones de Bootstrap 3.7 para alinear horizontalmente - html, wordpress, twitter-bootstrap, twitter-bootstrap-3, alineación

Estoy seguro de que este problema no es nuevo ... para nadie.

Tengo un diseño estándar de tres columnas con un título, un cuerpo y varios botones para cada columna. Mi problema son los botones. Se alinean horizontalmente cuando la segunda columna dentro de una ventana gráfica más grande de 768px. Estoy usando un HTML <br>, que siento que no es profesional / eficiente. Pero preferiría encontrar una mejor manera de alinear los botones horizontalmente dentro de variados viewports. Siento que estoy haciendo esto más difícil de lo necesario. Ver la página y cambiar la ventana debajo de 768px para ver a qué me refiero. Esta es la página que quiero decir: http://mpactchurches.com/growth-track-downloads/

¿algunas ideas? ¡Perdóname si se te ha preguntado un millón de veces!

Vea el siguiente código:

<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 &#8226; 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 &#8226; 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;">&#x2731;</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 &#8226; 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;">&nbsp;Week 6 (1.0 GB)&nbsp;</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;">&#x2731;</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>

Respuestas

0 para la respuesta № 1

No estoy del todo seguro de lo que quieres, pero supongo que quieres que se acumulen verticalmente cuando la ventana gráfica es más grande que 768px. Puedes poner tu <a> en un <div>

Esta es la columna de Primer Paso:

<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 &#8226; 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>

También debes dejar de usar <button> dentro de <a>, siempre puedes aplicar la clase a la etiqueta de anclaje