Wyśrdokowane menu w Bootstrap

pytanie zadane 22 stycznia 2016 w HTML i CSS przez Bakr Mądrala (6,850 p.)

Witam,

W jaki sposób sprawić, aby zawartość tego menu była wyśrodkowana?

HTML:

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="/">Home</a>
                </li>
                <li><a href="/products">Products</a>
                </li>
                <li><a href="/about-us">About Us</a>
                </li>
                <li><a href="/contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS:

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 15px;
    background-color: rgba(67, 132, 190, 1);
    border-width: 0px;
    border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(67, 132, 190, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(84, 149, 207, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(50, 115, 173, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #3273ad;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #3273ad;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #3273ad;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #4384be;
}

1 odpowiedź

odpowiedź 22 stycznia 2016 przez radek024 Szeryf (77,160 p.)

Z tego co widzę, menu masz w container-fluid, więc wypełnia się na całą szerokość. Jeżeli tak nie jest, masz błąd w kodzie, który myślę, że powstaje przez dodanie tych id(nie mam co do tego żadnej pewności, ale tak obstawiam).

komentarz 22 stycznia 2016 przez Bakr Mądrala (6,850 p.)

Z założenia menu powinno wypełnić całą szerokość, ale jego zawartość powinna być wyśrodkowana. Zarówno brand jak i lista wypunktowana.

komentarz 22 stycznia 2016 przez radek024 Szeryf (77,160 p.)

Oj, gdyby była wyśrodkowana, to tak naprawdę całość wyglądała by tak [ [LOGO][LINK][LINK][DROP] ] a myślę, że lepiej wyglądało by to tak: [ [LOGO] [LINK][LINK][DROP] ] Moim zdaniem całość załatwisz paddingiem z lewej i prawej.

komentarz 23 stycznia 2016 przez Bakr Mądrala (6,850 p.)

Chodzi o mniej-więcej taki efekt:

https://kursbootstrap.pl/examples/basic_navbar.html

komentarz 23 stycznia 2016 przez radek024 Szeryf (77,160 p.)

Jeżeli pobrałeś całą paczkę Bootstrapa, możesz wejść tutaj: docs/examples/navbar/index.html

Tam znajdzie interesujące(tak mi się wydaje) rozwązanie. Jeżeli tego nie pobrałeś, a używasz przeglądarki Chrome, możesz kliknąć PPM na interesujący Cię navbar, po czym prześledzić kod. Pozdrawiam ;)