Question

我制作了一个包含5个元素的导航栏：4个文本链接和1个徽标链接。所有5个元素都居中并需要保证金。当窗口变小时，边距也必须变小。

我想实现网格系统，但我似乎无法让它工作..

这里是JSFiddle：http://jsfiddle.net/bg9ubxq1/1/

HTML：

<nav id="menuTemp" class="navbar navbar-static-top text-center" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">
                <img src="content/images/logos/logo_mini.png" alt="logo" class="animated visible-xs visible-sm" />
            </a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav custom-navbar">
                <li><a href="#">Diensten</a></li>
                <li><a href="#">Technologie&euml;n</a></li>
                <li class="visible-md visible-lg">
                    <img src="content/images/logos/logo_mini.png" alt="logo" class="animated center-block" />
                </li>
                <li><a href="#">Vacatures</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.navbar-static-top .navbar-toggle .icon-bar {
    background-color: #888;
}
@media (min-width:768px) {
    .custom-navbar {
        margin: 5px auto;
        display: table;
        table-layout: fixed;
        float: none;
        height: 51px;
    }
}
#menuTemp {
    box-shadow: 0px 5px 10px #ddd;
    z-index: 1000;
    height: 58px;
}
.nav {
    margin-top: 3px;
}
.nav > li {
    /*margin: 0 60px;*/
    margin: 0 20px;
}
.nav > li > a:hover {
    background-color: #F5F7FA;
}
.nav > li > a:focus {
    background-color: white;
    outline: none;
}
.navbar-nav > li > img {
    position: relative;
    bottom: 1px;
}

Answer 1

我一分钟前想出来了。只需要应用一些像素精度调整的媒体查询。

当然我仍然需要修复崩溃功能，但这不应该太难！

JSFiddle：http://jsfiddle.net/ephy55bo/

HTML：

<nav id="menuTemp" class="navbar navbar-static-top text-center" role="navigation">
    <div class="container">
        <div class="navbar-header"> <a href="#" class="navbar-brand">
                    <img src="http://www.allphi.eu/content/images/logos/logo_mini.png" height="41" width="41" alt="AllPhi logo" class="animated hide" />
                </a>

            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav custom-navbar">
                <li><a href="#">Diensten</a>

                </li>
                <li><a href="#">Technologie&euml;n</a>

                </li>
                <li id="crop-fix">
                    <img src="http://www.allphi.eu/content/images/logos/logo_mini.png" alt="AllPhi logo" class="animated center-block" />
                </li>
                <li><a href="#">Vacatures</a>

                </li>
                <li><a href="#contact" data-toggle="modal">Contact</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

CSS：

body {
    font-family:"Segoe UI", "Arial", sans-serif;
    font-size: 15px;
    color: #9d9d9c;
    height: 100%;
    width: auto !important;
    padding: 0px;
    margin: 0px;
    background-color: white;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    -webkit-transform: translateZ(0);
    /*smooth translation in mobile*/
    -webkit-font-smoothing: antialiased;
    /*-webkit-font-smoothing:none;*/
}
a {
    color: #9d9d9c;
    font-weight: bold;
    text-transform: uppercase;
}
a:hover, a:focus {
    color: #2394d5;
}
.navbar-static-top .navbar-toggle .icon-bar {
    background-color: #888;
}
@media (min-width:768px) {
    .custom-navbar {
        margin: 5px auto;
        display: table;
        table-layout: fixed;
        float: none;
        height: 51px;
    }
}
#menuTemp {
    box-shadow: 0px 5px 10px #ddd;
    z-index: 1000;
    height: 58px;
}
.nav {
    margin-top: 3px;
}
.nav > li {
    width: 222px;
}
.nav > li > a:hover {
    background-color: #F5F7FA;
}
.nav > li > a:focus {
    background-color: white;
    outline: none;
}
.navbar-nav > li > img {
    position: relative;
    bottom: 1px;
}
@media (min-width: 1200px) {
    .nav > li {
        width: 222px;
    }
}
@media (min-width: 1100px) and (max-width:1199px) {
    .nav > li {
        width: 170px;
    }
}
@media (min-width: 992px) and (max-width: 1099px) {
    .nav > li {
        width: 152px;
    }
}
@media (min-width: 768px) and (max-width: 992px) {
    .nav > li#crop-fix {
        width: 95px;
        left: 8px;
    }
    .nav > li {
        width: 152px;
    }
}

如何在我的导航栏中制作我的元素

1 个答案: