| Autor | Zpráva | ||
|---|---|---|---|
| xciza Profil |
#1 · Zasláno: 25. 8. 2014, 10:24:29
Ahoj,
mám od grafika design připravený pro bootsrap 16 column grid. V bootstrapu jsem si nastavil, že tam těch 16 sloupců chci, nastavil jsem i jiný margin (na 20 - jak má být, dělí se 2ma takže levý + pravý = 20px), ale teď mám část - například v hlavičce kde levá část odpovídá 4 sloupcům a pravá 12 sloupcům, pravá část je rozdělena na další dvě a to na 4 sloupce a 8 sloupců. Jenže už když tu první část rozdělím pomocí class="col-md-4" a class="col-md-12" ( dohromady 16 sloupců) tak mě nehrajou šířky podle designu - levá je menší a pravá větší než v designu. Čím by to mohlo prosím být? Dá se ještě někde nastavit šířka sloupců? V gridu pro 16 sloupců je totiž 40px a předpokládám že pro 12 je jiná takže by to mohlo být tím? |
||
| Tomáš123 Profil |
#2 · Zasláno: 25. 8. 2014, 10:31:11
xciza:
Bodla by nejaká živá ukážka alebo obrázok rozdelenia stĺpcov. |
||
| Venca V Profil |
#3 · Zasláno: 25. 8. 2014, 11:36:34
Nezapomeň, že když máš row zanořenou v row, tak už samozřejmě nerozděluješ tu "původní", "containerovou" mřížku, ale už tu zanořenou, takže tomu musíš přizpůsobit počty sloupců.
|
||
| xciza Profil |
#4 · Zasláno: 25. 8. 2014, 16:48:06
Tomáš123:
ukázka tady: odkaz a web je rozdělen podle tohoto gridu: odkaz Venca V:O to mě právě jde, alě mělo by to fungovat snad fungovat tak jak popisuji v prvnim příspěvku. Hlavní row je široký 16 sloupců, ten rozdělen na 4 a 12 sloupů (16 dohromady) a ta 12ti sloupcová část rozdělená na 4 a 8 sloupců (12 dohromady). Ale přijdě mě, že tam právě jsou špatně šířky a nevím co s tím. |
||
| Tomáš123 Profil |
#5 · Zasláno: 25. 8. 2014, 18:45:09
xciza:
„Ale přijdě mě, že tam právě jsou špatně šířky a nevím co s tím.“ V súčasnosti máš šírku ľavého stĺpca nastavenú na 25% a šírku pravého na 75%. Tieto počty by mali sedieť aj podľa šablóny. „Dá se ještě někde nastavit šířka sloupců?“ Šírku jednotlivých stĺpcov si môžeš upraviť aj manuálne v externom CSS... V prípade ľavého stĺpca je šírka deklarovaná na riadku 1216, šírka pravého stĺpca zase na riadku 1192. Problém nesprávnej šírky stĺpcov môže bdieť aj v bez prefixov nastavenej vlastnosti box-sizing, čo spôsobí, že sa padding a border pripočítavajú ku šírke elementu z vonkajšej strany (ty tam máš celkom 60px padding-ov).
Venca V: „Nezapomeň, že když máš row zanořenou v row, tak už samozřejmě nerozděluješ tu "původní", "containerovou" mřížku, ale už tu zanořenou, takže tomu musíš přizpůsobit počty sloupců.“ Všetky šírky sú deklarované v percentách, takže v zlom súčte šírok stĺpcov pravdepodobne problém nebude. |
||
| xciza Profil |
#6 · Zasláno: 27. 8. 2014, 12:32:55
tak jsem si s tim trochu pohrál a už to sedí . ale mám teď trochu jiný probém. stránka stejná jako předtím: odkaz. Jak udelat ten levy sloupec s menu az dolu k paticce aby vyplnil celou obrazovku na vysku tim sedivim pozadim? Zkoušel jsem všude možně nastavovat height: 100%, ale zatím se mě to nijak nepovedlo.
Díky |
||
| Tomáš123 Profil |
xciza:
„Jak udelat ten levy sloupec s menu az dolu k paticce aby vyplnil celou obrazovku na vysku tim sedivim pozadim?“ Každému elementu nadradenému elementu <nav>, nastav výšku 100% (nezabudni na html a body). Potom sa ti stačí rozhodnúť, či chceš mať navigáciu s minimálnou výškou 100% (min-height: 100%;) alebo postačí iba height: 100%; (použi ju iba vtedy, ak vieš, že menu bude mať stále rovnakú výšku a si si istý, že v žiadnom prípade nepretečie).
|
||
| Bubák Profil |
#8 · Zasláno: 27. 8. 2014, 12:47:59
Koukni na http://teststranek.kvalitne.cz/vyska-sloupcu1/, ze stránky vedou další odkazy, které doporučuji navštívit.
|
||
| aDAm Profil |
#9 · Zasláno: 27. 8. 2014, 13:47:13
xciza:
řek bych že jsi tak trochu nepochopil jak se s těmi sloupci pracuje. To že jsi v hlaviččce ručně přebil classy pro šířku: header form .col-md-4 {
width: 33.3%;
}
header form .col-md-8 {
position: relative;
width: 66.7%;
}je IMHO blbost. Hlavičku máš rozdělenou na 2 sloupce z nichž první má šířku 4 sloupců a druhý šířku 12ti sloucpu <header>
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-12">
...
</div>
</div>
</header>Obsah co pak vkládáš do toho 12ti sloupcového pravého sloupce pak už musíš zase přizpůsobit jakoby těm 16ti sloupcům které ti udělají 100%. Jenže ty tam dáš 4 a 8 což je ve výsledku jen 12 a né 16. Takže to musíš upravit nějak takto: <div class="col-md-12">
<form class="row" sourceindex="0">
<div class="col-md-6 form-group">
...levý input se šipkou
</div>
<div class="col-md-10 form-group">
...pravý input s lupou
</div>
</form>
</div>navíc ti tam chyběla class row kterou jsem ti přidal do elementu form Zjednodušeně řečeno, 16 sloupcu máš jako hlavní dělení, ale pokud se zanoříš do nějakého sloupce tak máš zase k dispozici těch 16 sloupců. Ve výsledku by pak tvoje hlavička mohla vypadat takhle: <header class="row">
<div class="col-md-4 logo">
<h1>
<a href="/">
<img src="images/logo/logo.png" alt=" logo">
</a>
</h1>
</div>
<div class="col-md-12">
<form class="row" sourceindex="0">
<div class="col-md-6 form-group">
<input id="place" class="form-control" type="text" placeholder="Germering - BY" sourceindex="1">
</div>
<div class="col-md-10 form-group">
<input id="suche" class="form-control" type="text" placeholder="Suche nach News, Angeboten, Events, Jobs, Firmen..." sourceindex="2">
<input id="header-submit" type="submit" value="search" sourceindex="3">
</div>
</form>
</div>
</header>a poladit css: header .form-group {
margin-top: 15px;
} |
||
| xciza Profil |
aDAm:
Děkuji za objasnění použití. Ale stejně když použiji: <div class="col-md-12">
<form class="row" sourceindex="0">
<div class="col-md-6 form-group">
...levý input se šipkou
</div>
<div class="col-md-10 form-group">
...pravý input s lupou
</div>
</form>
</div>EDIT: Když si ale printscreen v photoshopu překryji layoutem 12 sloupců, tak to sedí přesně. Čili dle mého bych někde v bootstrapu potřeboval upravit ještě šířku jednotlivých sloupců. Protože u 12 sloupců má jeden sloupec 60px, kdežto u 16 sloupců je to jen 40px a v tomhle nejspíš bude problém. Jenže kde tu hodnotu změnit? |
||
| Venca V Profil |
#11 · Zasláno: 27. 8. 2014, 20:17:43
Trochu (více) v tom Bootstrapu plaveš, ale to ze začátku asi každý.
# Rozhodně neupravuj šířku těch sloupců, ale spíš se pokus pochopit, jak ten systém mřížky funguje. # Chceš tedy 12ti nebo 16ti sloupcovou mřížku? Dá se to nastavit ve variables.less. |
||
| xciza Profil |
#12 · Zasláno: 28. 8. 2014, 06:51:54
Venca V:
„Chceš tedy 12ti nebo 16ti sloupcovou mřížku? Dá se to nastavit ve variables.less“ Potřebuji 16ti sloupcovou mřížku. To už mám nastavený. Stejně tak jako nový padding na 20px, který se dělí 2ma a každý sloupec tak má 10px padding-left a padding-right. Ale právě že furt nehrajou ty sloupce, což bych potřeboval nějak vyřešit (vysvětlit) proč tomu tak je? |
||
| aDAm Profil |
#13 · Zasláno: 28. 8. 2014, 09:15:43
Tak pokud ti to nesedí je to docela divné, ale spíš to přisuzuju tomu že ti nesedí marginy. Pokud použiješ čistý BS tak tam problém není, stačí jen pochopit to jak se BS používá.
|
||
|
Časová prodleva: 3 dny
|
|||
| xciza Profil |
#14 · Zasláno: 31. 8. 2014, 18:17:14 · Upravil/a: xciza
V podstate mám ted cisty bootstrap ale stejne ty sloupce nesedí. Ale asi to udělám prostě tak aby to sedělo a bude. zákazník to snad pochopí.
Tomáš123: „Každému elementu nadradenému elementu <nav>, nastav výšku 100% (nezabudni na html a body). Potom sa ti stačí rozhodnúť, či chceš mať navigáciu s minimálnou výškou 100% (min-height: 100%;) alebo postačí iba height: 100%; (použi ju iba vtedy, ak vieš, že menu bude mať stále rovnakú výšku a si si istý, že v žiadnom prípade nepretečie).“ Tohle jsem zkusil v consoli a bohužel nefunguje.. ty jsi to zkoušel? |
||
|
Časová prodleva: 10 let
|
|||
0