/ / Stacks in Stiftung 6 - zurb-foundation, zurb-foundation-6

Stacks in der Foundation 6 - zurb-foundation, zurb-foundation-6

Ich versuche etwas in Foundation 6 zu erreichen und kann es nicht herausfinden. Hier ist eine Grafik, die mein Problem illustriert.

Grafik von dem, was ich versuche zu tun

Ich mache! Das tut mir leid :)

<!-- Signup / Login / FAQ / Social -->
<div class="row">

<!-- Left Side -->
<div class="large-4 medium-4 columns Rem1MarginBottom hide-for-small-only">
<!-- Have a friend-->
<h4 class="georgiaNormal">Text Column</h4>
</div>
<div class="large-2 medium-2 columns" style="border: 1px solid;">
<h4 class="georgiaBold"><a href="#">Link 1</a></h4>
</div>
<div class="large-2 medium-2 columns" style="border: 1px solid;">
<h4 class="georgiaBold"><a href="#">Link 2</a></h4>
</div>
<!-- Left Side -->

<!-- Right Side -->
<div class="large-4 medium-4 columns">
<div class="row" style="border: 1px solid;">
<div class="large-12 medium-12 columns hide-for-small-only">
<h4 class="georgiaBoldSmall centeredRed trouble">Text</h4>
</div>

<div class="large-12 medium-12 columns hide-for-small-only">
<h4 class="georgiaNormalSmall centeredRed faq_contact">Text <a href="#">Link</a> page or <a href="#">Link</a>.
</h4>
</div>
<div class="large-12 medium-12 small-12 columns Rem1MarginTop text-center Rem1MarginBottom">
<img src="/images/https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png" width="50" alt="#" />&nbsp;<img src="/images/https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png" width="50" alt="#" />
</div>
</div>
</div>
<!-- Right Side -->
</div>

Antworten:

0 für die Antwort № 1

Danke, dass du den Code hinzugefügt hast. Was Sie haben, ist vier Spalten, aber was Sie wirklich wollen, ist drei Spalten und für einige Inhalte in der mittleren Spalte zu stapeln. Versuche dies auf der linken Seite zu versuchen.

<!-- Signup / Login / FAQ / Social -->
<div class="row">

<!-- Left Side -->
<div class="large-6 medium-6 columns Rem1MarginBottom hide-for-small-only">
<!-- Have a friend-->
<h4 class="georgiaNormal">Text Column</h4>
</div>
<div class="large-2 medium-2 columns" style="border: 1px solid;">
<div><!-- this div should stack now -->
<h4 class="georgiaBold"><a href="#">Link 1</a></h4>
</div>
<div><!-- this div will be below the other link -->
<h4 class="georgiaBold"><a href="#">Link 2</a></h4>
</div>
</div>
<!-- Left Side -->

<!-- Right Side -->
...
<!-- Right Side -->
</div>

Ich änderte die erste Spalte auf "6" und entfernte, was Sie als dritte Spalte hatten (diejenige, die Ihre zweite Verbindung enthielt).

Also jetzt enthält die mittlere Spalte zwei Divs undsie werden übereinander gestapelt. Möglicherweise müssen Sie einige benutzerdefinierte CSS hinzufügen, um das Design zu erhalten, nach dem Sie suchen, aber zumindest haben Sie jetzt die richtige Struktur.


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen