/ / Pobierz przyciski Bootstrap 3.7, aby wyrównać poziomo - html, wordpress, twitter-bootstrap, twitter-bootstrap-3, wyrównanie

Pobierz przyciski Bootstrap 3.7, aby wyrównać poziomo - html, wordpress, twitter-bootstrap, twitter-bootstrap-3, wyrównanie

Jestem pewien, że ten problem nie jest nowy ... dla nikogo.

Mam standardowy układ trzech kolumn z tytułem, ciałem i kilkoma przyciskami dla każdej kolumny. Mój problem to przyciski. Są one ustawione w linii poziomo, gdy druga kolumna w rzutni większy niż 768px. Używam HTML <br>, który moim zdaniem nie jest profesjonalny / wydajny. Ale wolałbym znaleźć lepszy sposób na dostosowanie przycisków poziomo w różnych rzutniach. Czuję, że robię to trudniej, niż powinno być. Zobacz stronę i zmień okienko poniżej 768px, aby zobaczyć, co mam na myśli. To jest strona, którą mam na myśli: http://mpactchurches.com/growth-track-downloads/

jakieś pomysły? Wybacz mi, jeśli ktoś mnie o to prosił milion razy!

Zobacz poniższy kod:

<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>

Odpowiedzi:

0 dla odpowiedzi № 1

Nie jestem całkowicie pewien, czego chcesz, ale zakładam, że chcesz, żeby układały się pionowo, gdy okno robocze jest większe niż 768 pikseli. Możesz umieścić swoje <a> w <div>

To jest kolumna Pierwszy krok:

<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>

Powinieneś także przestać używać <button> wnętrze <a>, możesz zawsze zastosować klasę do samego znacznika kotwicy