NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Problém s bootstrapem

Aktivity
Avatar
pgarsky
Člen
Avatar
pgarsky:1.1.2017 20:03

Ahojte,
nejprve chci všem popřát happy new year. A dále mám jeden krátký problém s bootstrapem. Nejprve sem hodím zdrojáky, poté je popíšu. Zdroják celého bootstrapu sem dávart nebudu, ale je to verze 3.3.7.

Kód stránky:

<div class="container">
            <p>Seřadit: <a href="index.php">Od nejlepších</a> | <a href="?latest">Od nejnovějších</a></p>
            <hr style="border: 1px dashed lightgray;">
            <div class="container wrapped post">
                <h2 class="inline-block">První článek</h2> <div class="inform inline-block col-xs-offset-5"><p><strong>Den vložení:</strong> 5.5. 2016<br><strong>Autor:</strong> Pavel Gárský<br><strong>Kategorie:</strong> Nezařazené<br><strong>Oblíbenost:</strong> 100%</p></div>
                <p>něconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěconěco</p>
                <p class="inline-block">Komentáře<span class="badge">5</span></p><a href="#" class="btn btn-danger inline-block col-xs-offset-8" role="button">Celý článek</a>
            </div>
            <hr style="border: 1px dashed lightgray;">
        </div>

Vlastní CSS:

.inline-block {
    display: inline-block;
}
.post {
    border-left: 1px solid gray;
    border-right: 1px solid gray;
}
.inform {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}

Problém je v tom, že div 'inform' potřebuji dát tak, aby byl úplně vpravo, a okraje borderu se dotýkaly seshora, i z prava. Zároveň to potřebuji nechat tak, aby ten nadpis, i ta info tabulka vpravo zůstaly ve stejném řádku. A pokud bude nadpis delší, tak aby se automaticky zalomil na další řádek.
Děkuji předem.

Odpovědět
1.1.2017 20:03
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
vlam
Člen
Avatar
vlam:21.1.2017 19:19

A co do .inform přidat:

position: relative;
float: right;

popř. ještě

right:0; top:0;
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
21.1.2017 19:19
Do demence ještě stále daleko.
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:21.1.2017 21:23

Rozhodne by bylo dobre si o bootstrapu neco precist...

Zanorovat do sebe containery neni spravne, pokud chces osetrit wrapper pro zanorene elemety, kde bude float, tak pouzij bud row nebo clearfix. Do row patri prvky col-XX-XX ...

 
Nahoru Odpovědět
21.1.2017 21:23
Avatar
pgarsky
Člen
Avatar
Odpovídá na Jiří Fencl
pgarsky:21.1.2017 22:18

děkuji.

Nahoru Odpovědět
21.1.2017 22:18
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
pgarsky
Člen
Avatar
Odpovídá na vlam
pgarsky:21.1.2017 22:18

funguje. ;)

Nahoru Odpovědět
21.1.2017 22:18
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.