[bootstrap] Uit bootstrap grid breken

[Firesphere]

Wat ik graag wil, is dat ik het bootstrap grid kan doorbreken vanaf een gedefinieerd punt in de WYSIWYG via een bepaalde tag.

De tag etc. is het probleem niet, het uitbreken wel.

Wat ik wil:
| col-xs-9 titel _ | col-xs-3 |
| col-xs-9 content | col-xs-3 |
[[breakout]]
| col-xs-12 rest-van-content _|

In de (versimpelde, er zitten veel if's/else zaken in die het kapot maken) html:

HTML:

<div class="col-xs-9">Dit is de titel<br />
<div class="content">De content, met ergens een [[breakout]]</div>
</div>
<div class="col-xs-3">De zijkant, die ongeveer tot 1 alinea in de content lang is. Meestal</div>

Omdat ik de breakout-positie niet goed bepaald krijg, valt het soms heel raar uit met witregels, of valt er tekst weg.

Waarschijnlijk is het heel simpel en zie ik iets over het hoofd, maar ik kan nergens vinden hoe ik dit kan bereiken.

Mijn grote probleem is dus, dat ik niet precies weet waar de breakout plaats moet vinden. Ik heb verschillende methodes zelf proberen toe te passen, maar zonder resultaat.
Ik kan niet op de breakout-plek alle divs sluiten en een nieuwe openen, omdat hiermee de styling compleet naar z'n grootje gaat, en er dingen verkeerd links/rechts gaan zweven, wat ook weer niet de bedoeling is.

Ik hoop dat iemand me kan helpen een "echte" breakout te laten plaatsvinden.

[Megamind]

Heb je

code:

.content {
clear: both;
}

Geprobeerd?

[Firesphere]

Ja, heb ik geprobeerd. Probleem is alleen, dat ik dus niet de divs kan sluiten, omdat ik op dat moment niet weet hoeveel divs er open zijn.

In bootstrap is het de class clearfix, maar die zorgt dus voor heel veel ongewenste bij-effecten, en alsnog een col-9 ipv de gewenste col-12.

Wat ik zoek is echt dat ik dus uit de bootstrap breek van col-9 naar col-12. en dus vanaf het ietwat willekeurige [[breakpoint]] moment, een col-12 heb, ipv de originele col-9

[WernerL]

Is jouw probleem niet makkelijker op te lossen op een niet-bootstrap manier? Maak 1 row van 12 cols. Zet daarin een div voor de sidebar en zet op float: right. De content gaat in dezelfde div en zou automatisch de voledige breedte in moeten nemen zodra de content langer wordt dan de sidebar div.

Of dit een mooie oplossing is laat ik in het midden.

Zoiets dus:

code:

<div class="col-xs-12">
<div class="sidebar">
blabla<br /> bla
</div>
Hier je lange content
</div>

Met css:

code:

.sidebar { width: 25%; height: auto; float: right; }

[Pizzalucht]

Kun je niet wat preprocessing doen om te kijken hoeveel div's je moet afsluiten (en dus ook weer moet openen in de rest-van-content div?
Verder lijkt me dit een heel slecht idee, je gaat geheid krijgen dat editors een [[breakout]] in een <p>, <a> of <table> stoppen, tenzij je die eerst netjes afsluit natuurlijk.

[Feanathiel]

Misschien denk ik te makkelijk; is het niet mogelijk om twee invoervelden te maken? Eén voor 'content' en één voor 'rest van content'?

[Firesphere]

Ik zit ook met zaken als bijvoorbeeld itemproperties etc. En een tweede itemprop="description" te starten is ook weer een slecht idee

Vandaar dat ik dus liever een break-out heb, dan alles sluiten en heropenen.

[NMe]

Een regular die Waar hoort mijn topic? niet kent?

PRG >> WEB

[Firesphere]

NMe schreef op zondag 01 februari 2015 @ 01:41:
Een regular die Waar hoort mijn topic? niet kent?

PRG >> WEB

Over het hoofd gezien omdat ik uit automatisme in PRG zit.

* Firesphere gaat in een hoekje zitten
Of eigenlijk, gaat Firesphere gewoon in z'n bedje liggen, want het is bedtijd, maar dat terzijde.

[Zoefff]

Wat ik uit je verhaal destilleer is dat je, met behulp van het 12-column Bootstrap grid, een layout met content van 9 kolommen breed en sidebar van 3 kolommen breed wilt. In de content heb je dan soms nog andere content die je de volledige breedte (12 kolommen) wilt geven.

De enige nette oplossing lijkt me toch echt om alle kolommen tot je .row of .container wrapper af te sluiten, een nieuwe .col-xs-12 te starten, en daarna weer alles te openen om met je 9 / 3 layout verder te gaan. Dat sluiten kan je natuurlijk zowel server-side met DOMDocument als client-side met wat Javascript doen.

Een andere oplossing zou ik zoeken in een negatieve margin, waarbij je de inhoud gewoon over de rechter kolom heen laat komen. Nadeel hierbij is wel dat de 'break-out' niet in de flow van de sidebar zit, waardoor het dus zomaar kan gebeuren dat je over inhoud van de sidebar heen breekt.

Het berekenen van de negatieve marge is nog wel een klein obstakel. Effectief moet dit 25% zijn (de breedte van de sidebar), maar omdat de break-out binnen de content van 75% zit kan je hier niet zomaar 25% van nemen; dan krijg je immers 25% van 75%. De oplossing is om 1/3 van die 75% te nemen, waarbij je voor een volledig correcte breedte de 30px padding ook nog moet meenemen

Samengevat:

HTML:

<div class="container">
    <div class="col-xs-9">
        <h1>Titel</h1>
        
        <div class="content">
            <p>Content</p>
            
            <div class="break-out">
                <p>Joehoe</p>
            </div>
            
            <p>Meer content.</p>
        </div>
    </div> 
    <div class="col-xs-3">
        <p>Sidebar met korte paragraaf en andere meuk. Voor demo-purposes nog wat lorem ipsum dolor sit amet,  consectetur adipiscing elit. Sed eu massa lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus!</p>
    </div>
</div>

Cascading Stylesheet:

.col-xs-9 {
    background: red;
    z-index: 10;
}

.col-xs-3 {
    background: blue;
}

.break-out {
    background: green;
    margin-right: calc((100% + 30px) / -3); /* == calc(-1 * ((100% + 30px) / 3)); */
}

Zie bovenstaande code in deze JSfiddle.

[sjimster]

Waarom onderbreek je de row's niet en plaats je een .container-fluid er tussen?

[sjimster]

sjimster schreef op maandag 02 februari 2015 @ 16:19:
Waarom onderbreek je de row's niet en plaats je een .container-fluid er tussen?

Sorry dat werkt natuurlijk niet met een sidebar

[Firesphere]

Zoefff schreef op maandag 02 februari 2015 @ 14:23:
Wat ik uit je verhaal destilleer is dat je, met behulp van het 12-column Bootstrap grid, een layout met content van 9 kolommen breed en sidebar van 3 kolommen breed wilt. In de content heb je dan soms nog andere content die je de volledige breedte (12 kolommen) wilt geven.

De enige nette oplossing lijkt me toch echt om alle kolommen tot je .row of .container wrapper af te sluiten, een nieuwe .col-xs-12 te starten, en daarna weer alles te openen om met je 9 / 3 layout verder te gaan. Dat sluiten kan je natuurlijk zowel server-side met DOMDocument als client-side met wat Javascript doen.

Een andere oplossing zou ik zoeken in een negatieve margin, waarbij je de inhoud gewoon over de rechter kolom heen laat komen. Nadeel hierbij is wel dat de 'break-out' niet in de flow van de sidebar zit, waardoor het dus zomaar kan gebeuren dat je over inhoud van de sidebar heen breekt.

Het berekenen van de negatieve marge is nog wel een klein obstakel. Effectief moet dit 25% zijn (de breedte van de sidebar), maar omdat de break-out binnen de content van 75% zit kan je hier niet zomaar 25% van nemen; dan krijg je immers 25% van 75%. De oplossing is om 1/3 van die 75% te nemen, waarbij je voor een volledig correcte breedte de 30px padding ook nog moet meenemen

Samengevat:

HTML:

<div class="container">
    <div class="col-xs-9">
        <h1>Titel</h1>
        
        <div class="content">
            <p>Content</p>
            
            <div class="break-out">
                <p>Joehoe</p>
            </div>
            
            <p>Meer content.</p>
        </div>
    </div> 
    <div class="col-xs-3">
        <p>Sidebar met korte paragraaf en andere meuk. Voor demo-purposes nog wat lorem ipsum dolor sit amet,  consectetur adipiscing elit. Sed eu massa lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus!</p>
    </div>
</div>

Cascading Stylesheet:

.col-xs-9 {
    background: red;
    z-index: 10;
}

.col-xs-3 {
    background: blue;
}

.break-out {
    background: green;
    margin-right: calc((100% + 30px) / -3); /* == calc(-1 * ((100% + 30px) / 3)); */
}

Zie bovenstaande code in deze JSfiddle.

Hmmm, jouw breakout zou inderdaad wel eens precies kunnen zijn wat ik zoek.

Ik weet dat't niet de netste methode is, maar op het punt van de breakout heb ik eigenlijk geen flauw idee hoeveel divs er effectief open staan etc. omdat het dus helemaal "custom" lay-out is.

Daarnaast is het moment waarop de sidebar gerendered wordt, niet 100% zeker, dit kan bovenaan, onderaan etc. zijn (lang verhaal)

Ik weet dat ik't moet afsluiten, maar daarvoor moet ik eerst een nette manier vinden. Deze fiddle is nu de eerste oplossing. Later misschien eens even de hele html lay-out opnieuw opbouwen naar een betere/nettere structuur.