Avatar
tbartolen
Člen
Avatar
tbartolen:

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. května 20:13
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na tbartolen
tbartolen:

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. května 20:19
Navštiv www.fb.com/skkelticz
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na tbartolen
Ján Timoranský:

Skús toto:

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

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

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. května 20:37
Navštiv www.fb.com/skkelticz
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na tbartolen
Ján Timoranský:

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. května 20:50
Find what you love and let it kill you.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Ján Timoranský
tbartolen:

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. května 21:09
Navštiv www.fb.com/skkelticz
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na tbartolen
Ján Timoranský:

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í
+1 bodů
Řešení problému
Nahoru Odpovědět 18. května 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.