NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Bootstrap přizpůsobení HTML a CSS

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
tbartolen
Člen
Avatar
tbartolen:18.5.2016 20:13

Zdárek,
Tvořám svůj první web pomocí bootstrapu. Jsem opravdu na začátku, ale už nevím :-) Chci použít nějakou jejich třídu na menu a vytvořit si potom nějaký wrapper (zatím tam mam jen container na start)
Problém je v tom, že nechci mít položky v menu nalepené uplně v pravo. Řeším to tedy tak, že dávám

margin-left: 20%;

Jenže jakmile začnu v takovém případě zmenšovat displej, budu pořád na 20% a tím pádem si zruším tu nádheru bootstrapu a budu muset opět do media queries..existuje nějaký pohodlnější řešení jak to dostat na pozici kde to chci mít?
Díky!
kód

<!Doctype HTML>
<html lang="cs">
<head>
        <meta charset="UTF-8">
        <title>Basic Layout</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
                <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- jQuery library -->
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
                <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <!--Upravy CSS-->
                <link rel="stylesheet" type="text/css" href="C:\Users\ragulin\Disk Google\Tvorba stránek\Example\style.css">
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <!--<ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>-->
    </div>
  </div>
</nav>
        <div class="container">
        <h1> Začátek Xidonie</h1>
        <p>Začátek práce</p>
        </div>

</body>

CSS

.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
        margin-left: 20%;
}

.container {
        margin-left: 20%;
}
Odpovědět
18.5.2016 20:13
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na tbartolen
tbartolen:18.5.2016 20:19

Ještě mě napadla taková prasečinka. Vsadit ten navbar do wrapperu, a pak za to posadit stejně širokou a barevnou lištu do pozadí, která by to dokreslovala do stran. To ale asi není idealní řešení, ne?

Nahoru Odpovědět
18.5.2016 20:19
Navštiv www.fb.com/skkelticz
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na tbartolen
Ján Timoranský:18.5.2016 20:22

Skús toto:

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}
Nahoru Odpovědět
18.5.2016 20:22
Find what you love and let it kill you.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Ján Timoranský
tbartolen:18.5.2016 20:37

Ne, to není ono...těm media queries se asi nevyhnu ani u bootstrapu jednoduše, že? Minimálně u toohle, a myslím, že toho bude víc...přeci jen, těch mých 20% mi přijde jako rozumné řešení s tím, že na ruzných druzích displeje to budu muset definovat vše zvlášt...

Nahoru Odpovědět
18.5.2016 20:37
Navštiv www.fb.com/skkelticz
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na tbartolen
Ján Timoranský:18.5.2016 20:50

Tak ja som si ten tvoj html kód dal na fiddle a funguje to, teda lepšie ako s media queries podľa mňa. http://jsfiddle.net/bdd9U/1078/

Nahoru Odpovědět
18.5.2016 20:50
Find what you love and let it kill you.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Ján Timoranský
tbartolen:18.5.2016 21:09

No mě jde o to, aby levý kraj -Home- , a nebo idealně -Website name- , byl srovnaný s levým okrajem obsahu pod tím...něco jako je tady...
http://bragthemes.com/demo/pinstrap/

Nahoru Odpovědět
18.5.2016 21:09
Navštiv www.fb.com/skkelticz
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na tbartolen
Ján Timoranský:18.5.2016 22:20

Tak to som ťa zle pochopil. Zmeň "container-fluid" v nave na "container". Nakoľko aj v body máš container tak budú mať rovnakú šírku.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
18.5.2016 22:20
Find what you love and let it kill you.
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 7 zpráv z 7.