Wątek przeniesiony 2015-01-01 22:16 z Webmastering przez dzek69.

Gdzie w CSS mogę wycentrować navbar w Bootstrapie 3.3.1?

0

Gdzie w CSS mogę wycentrować navbar w Bootstrapie 3.3.1

<ul class="nav navbar-nav">
  <li><a href="#">Homepage</a></li>
  <li><a href="#">Beer</a></li>
  <li><a href="#">Muffins</a></li>
  <li><a href="#">Fruits</a></li>
  <li><a href="#">Magazine</a></li>
</ul>

Tzn. wygląda to u mnie:

UPaERVR.png

a chciałbym tak: (w paincie przerobione):

EjI2oDP.png

poprawienie tytułu i tagów wątku, dodanie znacznika <code class="htl"> i dodanie obrazków do załączników posta - @furious programming

0

Google ledwo działają ze względu na ilość wyników pod bootstrap center navbar...

0

Działają, ale mam problem ze znalezieniem w CSS tego :v

Już sobie poradziłem, wystarczyło:

        <style>
            .navbar-nav{
    margin: 0 auto;
    display: table;
    table-layout: fixed;
    float:none;
}
        </style> 
0

Wstyd przyznać, ale też mam taki problem.
Ale znalazłem go w Google - http://codepen.io/davidcochran/pen/rcHae
Tylko najlepsze, że przepisuje to idealnie ale tak nie działa.
http://images83.fotosik.pl/212/006efcc37deb4cf4.png

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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="Stylesheet" type="text/css" href="style.css" />
    <title>Bootstrap 101 Template</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>













<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand Logo</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="pull-left"><a href="#">Dashboard</a></li>
        <li class="active"><a href="#">Stories</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Photos</a></li>
        <li class="social pull-right"><a href="#">Social Links</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>











    <div class="contener">
        <div class="row">

            <div class="col-md-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laudantium, reiciendis! In debitis corrupti atque saepe voluptate, explicabo est molestiae tempora nostrum. Blanditiis illo qui neque minus assumenda veritatis praesentium mollitia ducimus culpa obcaecati deleniti, voluptatibus quos temporibus voluptate placeat nesciunt tempora esse est minima recusandae! Soluta commodi, totam. Ut illum quibusdam, doloremque perspiciatis inventore nemo cupiditate facilis eveniet culpa eum eos vitae animi voluptas voluptate corporis hic tempora architecto quisquam cum ipsa! Deserunt sapiente numquam expedita nesciunt sequi voluptas laborum amet qui dolore fugit consequuntur impedit, nostrum non sunt iure corporis debitis perspiciatis perferendis aliquam repellendus ex, dignissimos accusantium?</div>
            <div class="col-md-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit eligendi nemo adipisci et temporibus veritatis porro repellat quis quasi iste ut nulla molestias animi velit nihil maxime distinctio sapiente sed consequuntur, facilis consectetur! Adipisci reiciendis commodi praesentium, quas eveniet, soluta laboriosam molestias neque qui inventore incidunt cum rerum esse similique architecto quia veniam. Suscipit incidunt quae eaque aperiam, quidem aliquam obcaecati ab repudiandae dolore minus. Voluptas ab quis ad est ullam, nobis voluptatum velit error, nesciunt iste accusamus hic eum reiciendis in labore. Eligendi impedit culpa vitae hic exercitationem eius eaque alias nobis, porro, cupiditate quaerat, ea nemo illo reiciendis. Illum voluptatum nihil non in dignissimos nisi animi magni ex incidunt laborum blanditiis libero commodi omnis id, corporis explicabo et voluptates a repellat. Architecto voluptate sapiente fugit illum corporis est veritatis mollitia consequatur nostrum reprehenderit soluta, et, modi tempora ea adipisci! Repellat, officiis. Obcaecati natus nihil distinctio illum sit consectetur tempora quasi id, eos fuga voluptatum repudiandae. Facilis temporibus debitis praesentium voluptatibus, culpa esse, quibusdam ratione inventore. Molestias sequi, cupiditate minima repellat quidem quod nemo commodi fugit iure quaerat accusamus aperiam aliquam, fugiat dignissimos nisi obcaecati corporis deserunt maxime reprehenderit nesciunt voluptatibus! At reiciendis, vero maxime mollitia inventore, deserunt magni ratione id officiis saepe. Eaque vitae expedita, voluptates necessitatibus voluptatem delectus aliquam, error quibusdam cumque iusto ea sed qui temporibus doloribus laboriosam odit, sequi natus ducimus repellendus laborum molestias nesciunt? Iste maiores et officia voluptas blanditiis quo saepe fugiat voluptatibus rem aut delectus, dolore eveniet esse. Ex, necessitatibus exercitationem provident! Voluptates laudantium voluptatibus id quod, aut eligendi excepturi dolore temporibus. Ratione consequatur ipsum, ad dolores aliquam voluptatibus facilis voluptates maiores alias hic aut neque reiciendis illo provident velit, libero tempore rem nemo enim. Aut nulla, esse! Eius distinctio optio omnis veniam hic quidem perferendis est, excepturi perspiciatis earum accusantium nam unde sapiente et natus ut non consequuntur ipsa commodi corrupti, obcaecati quam voluptatum vel dolor cupiditate. Unde, in, libero. Fugit molestiae facilis, consequuntur saepe minus asperiores! Neque ratione magnam, aliquam numquam dolor minus omnis, excepturi nihil ab repudiandae fugiat molestias ducimus, saepe mollitia! Corrupti consequuntur odio tempore repellat eaque iure provident repudiandae voluptates! Quisquam explicabo unde at repellat recusandae delectus inventore culpa perferendis facere vitae? Non doloribus, illo voluptatibus error beatae officiis nisi est molestiae, quam fugit, doloremque. Exercitationem similique recusandae vitae voluptates. Natus, tempore distinctio, praesentium facilis optio, laudantium laborum vitae, nihil incidunt debitis fugiat. Obcaecati beatae labore, itaque delectus velit perferendis eveniet incidunt inventore deserunt suscipit architecto vitae. Maxime incidunt ipsam iste autem. Sit architecto velit laborum maiores necessitatibus! Delectus magni quasi minima maxime placeat, accusantium facere hic, quaerat velit quam ullam voluptates. Modi repellendus, aliquam dolorem corporis enim et, laboriosam voluptatum aut, ea expedita itaque? Atque consequuntur nesciunt ab totam odit iure quibusdam aliquid asperiores laudantium doloribus aperiam assumenda, dignissimos sed minus deleniti doloremque temporibus deserunt eligendi. Recusandae ab ullam perferendis corrupti officiis iste temporibus vitae assumenda, ipsam voluptates atque, earum quam, unde dolorem porro, molestiae quo optio eaque sed amet reprehenderit. Dolor nostrum nemo, voluptatibus fugit ab molestiae sequi? Doloribus perspiciatis fugit aperiam dolor! Aperiam mollitia expedita quia impedit rerum doloribus ratione dolorum ea explicabo necessitatibus fugiat odit nihil eos, officiis non, perspiciatis tempora laboriosam totam natus accusantium deserunt unde sunt minus ducimus. Impedit optio soluta labore recusandae laudantium tenetur eius, sed ducimus exercitationem vitae, nostrum dolor commodi voluptate id facilis molestias tempora earum officiis expedita saepe, nesciunt quidem accusantium numquam blanditiis! Harum minima, exercitationem reprehenderit voluptatibus perspiciatis laudantium, non illo alias nihil quas expedita aspernatur illum saepe vitae assumenda molestiae officiis dicta quisquam ut accusantium? Amet delectus ipsa doloremque eaque magni omnis vitae sequi, enim totam exercitationem sunt ratione tempore, iusto. Ut laudantium id aperiam obcaecati officiis vitae, odio inventore sint omnis? Fugit facere odit, accusantium dolore laboriosam fuga deserunt, natus tempora rerum blanditiis nihil quidem officia perferendis corporis illum aperiam molestiae rem aspernatur repellendus mollitia consequuntur hic suscipit. Sint unde, accusantium sed reiciendis corrupti quidem ipsum aperiam itaque obcaecati. Excepturi, a, debitis. Atque voluptas assumenda reprehenderit. Quod nihil alias, rem minima modi molestiae a corporis, optio adipisci corrupti, quidem magni, vero veniam nisi. Debitis aliquam ea perferendis officiis veniam aliquid impedit sint vero, dignissimos rem velit itaque, atque voluptas recusandae, necessitatibus eligendi repellendus eos nulla veritatis quae. Inventore corporis repellat nisi odit obcaecati aspernatur voluptate sequi iste, quod expedita temporibus iusto consectetur minus, repellendus, quam eligendi consequuntur! Qui eos consectetur in, a alias perspiciatis deserunt officia dolorem, officiis dolore. Culpa quis ipsum adipisci. Dolores voluptate at quia, voluptatem consectetur fugit, tenetur atque cupiditate hic, veritatis perferendis incidunt nihil harum optio. Quam dignissimos, harum doloribus dolores voluptatum natus provident numquam praesentium dolorem? Placeat eligendi deleniti vel qui quod ipsam porro explicabo quis assumenda, odio voluptatibus consequatur consequuntur earum ea, impedit perspiciatis molestias, optio nam rem officia debitis. Asperiores magnam voluptatem inventore, pariatur veritatis, tenetur quas corporis qui illum similique voluptas ex dignissimos accusantium sint ullam, velit non ipsa fugiat eos suscipit. Nisi repellat corrupti nihil laborum culpa atque, dolor neque beatae commodi, provident. Molestiae quo deserunt voluptate similique perspiciatis. Hic, quisquam similique quasi, dicta molestias possimus cupiditate perferendis velit, totam culpa veritatis est sapiente! Reprehenderit neque culpa est temporibus? Maxime, ipsam consequuntur quis labore architecto dolorum nam eius quae eos sit odio quo id totam earum beatae minus reiciendis aut amet quidem, delectus debitis. Voluptatibus unde inventore facilis repellendus, nesciunt adipisci obcaecati mollitia quasi excepturi quos porro consequatur quam iusto et commodi ipsam alias rerum. Qui explicabo iure et corrupti ratione molestiae id quaerat! Molestias, praesentium magni natus reiciendis autem doloremque voluptatem quod optio ullam ad iusto, cum aperiam blanditiis, perferendis velit quos rem, voluptatibus qui aspernatur repudiandae! Ut mollitia nam quaerat numquam, inventore libero esse? Ab sapiente sit neque voluptas dolore. In veritatis non ipsa iusto cumque ipsam, laboriosam, ullam eius assumenda quae repellendus accusamus quidem, minima incidunt fugiat delectus quia, atque accusantium est ea deleniti quod neque. Maxime, ullam reprehenderit debitis saepe reiciendis sit earum! Quia deserunt officiis aut, eum velit voluptatem quam, repudiandae provident ipsam obcaecati molestias asperiores animi tempora, qui voluptatibus.</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>
            <div class="col-md-1">fgdgfc</div>


        </div>

    </div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>

</html>
  .navbar-nav {
    width: 100%;
    text-align: center;
    > li {
      float: none;
      display: inline-block;
    }
  }

1 użytkowników online, w tym zalogowanych: 0, gości: 1