Bootstrap posuv sidebar-u – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Bootstrap posuv sidebar-u – CSS – Fórum – Programujte.comBootstrap posuv sidebar-u – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Majky
~ Anonymní uživatel
17 příspěvků
22. 6. 2014   #1
-
0
-

Ahojte, začínam pracovať s FW bootstrap a akosi si už dlhšiu dobu lámem hlavu nad jedným problém, dnes som sa rozhodol požiadať vás o pomoc. Mám HTML stránku:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Logo</title>

    <!-- Bootstrap core CSS -->
    <link href="http://startbootstrap.com/templates/css/bootstrap.css" rel="stylesheet">

    <!-- Add custom CSS here -->
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php">Logo</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#about">Menu 1</a>
                    </li>
                    <li><a href="#services">Menu 2</a>
                    </li>
                    <li><a href="#contact">Menu 3</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <div class="container">

        <div class="row">
            <div class="col-lg-8">


				
				
				
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/900x300" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/900x300" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
	
	    <div class="item">
      <img src="http://placehold.it/900x300" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
				
				
                <hr>
                <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...</p>
                <hr>

                
            </div>

            <div class="col-lg-4">
                <div class="well">
                    <h4>Sidebar 1</h4>
                    <div class="input-group">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lectus semper, semper ipsum vel, ornare ligula. Etiam a luctus odio. Praesent adipiscing, lectus vitae venenatis mollis, nisl sem pellentesque metus, non sollicitudin enim justo id mi. Sed condimentum nunc et tristique posuere. Vestibulum tellus dolor, tempor eget eros quis.
                    </div>
                    <!-- /input-group -->
                </div>
                <!-- /well -->
                <div class="well">
                    <h4>Sidebar 2</h4>
                    <div class="row">
                        <div class="col-lg-12">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...
                        <br><button type="button" class="btn btn-success">Detail</button>
						</div>
                        
                    </div>
                </div>
                <!-- /well -->
					<div class="well">
                    <h4>Sidebar 3</h4>
                    <div class="row">
                        <div class="col-lg-12">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...
                        <br><button type="button" class="btn btn-success">Detail</button>
						</div>
                        
                    </div>
                </div>
				
				<div class="well">
                    <h4>Sidebar 4</h4>
                    <div class="row">
                        <div class="col-lg-12">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lobortis vel turpis ac tincidunt. Nunc rhoncus, sapien et faucibus porttitor...
                        <br><button type="button" class="btn btn-success">Detail</button>
						</div>
                        
                    </div>
                </div>
                <!-- /well -->
            </div>
        </div>

        <hr>

        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy;</p>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.container -->

    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>

</body>

</html>

V style.css mám ešte dodatočne tento kód:

body {
	margin-top: 100px;
}

footer {
	margin: 50px 0;
}

Ide mi o to, že na niektorých zariadeniach sa mi všetky SIDEBAR presunú úplne dole pod všetko, riešenie je  zmena zoomu prehliadačana 75%, alebo mne  sa to na rozlíšení 1366x768 ukáže normálne na pravom boku, väčšie rozlíšenia s tým majú akosi problém. 

Vedeli by ste mi pomôcť, akým spôsobom mám zafixovať dané SIDEBARS tak, aby boli napravo a boli tam zafixované? Možno stačí len pár riadkov do style.css, ale akosi neviem ako na to. Budem veľmi rád ak sa niekto nájde a pomôže mi s týmto problémom, s ktorým sa trápim už dlho. 

ĎAKUJEM!

Nahlásit jako SPAM
IP: 95.105.244.–
Reklama
Reklama
peter
~ Anonymní uživatel
2528 příspěvků
24. 6. 2014   #2
-
0
-
Nahlásit jako SPAM
IP: 2001:718:2601:258:1d92:6a...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

Podobná vlákna

Twitter Bootstrap — založil quatermain

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý