中心对齐不适用于导航栏上的 Bootstrap

Question

我是 Bootstrap 的新手，我正在尝试编写一个包含导航、侧边导航的简单网页..

我需要 "triMago" 分支图像位于导航栏的中央

但它不适用于 margin : auto;

等常见解决方案

我也是 Whosebug 的新手，如果我做错了什么请告诉我，谢谢。

我的代码：

<body>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="130">
    <div class="container-fluid">
        <div class="navbar-header" >
            <a class="navbar-brand" href="#" id="logo">
                <img src="https://imgur.com/download/8WZa7jf" alt="logo" >
            </a>
        </div>
        <nav class="nav nav-pills" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" id="homepage" class="navButton"> Home</a></li>
                <li><a href="#" id="about" class="navButton"> About us</a></li>
            </ul>
        </nav>
    </div>
</nav>

<div class="container-fluid text-center">
    <div class="row content">
        <div class="col-sm-10 text-left">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <hr>
            <h3>Test</h3>
            <p>Lorem ipsum...</p>
        </div>
        <div class="col-sm-2 sidenav">
            <div class="well">
                <p>ADS</p>
            </div>
            <div class="well">
                <p>ADS</p>
            </div>
        </div>
    </div>
</div>

<footer class="container-fluid text-center">
    <p>WaterBall &copy; MingChang Homework-Purpose</p>
</footer>

我的 css :

/* Remove the navbar's default margin-bottom and rounded borders */
    .navbar {
        height: 130px;
        background-color: #FFF;
        border-bottom: 3px solid gray;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {
        height: 70%;
    }

    /* Set gray background color and 100% height */
    .sidenav {
        padding-top: 20px;
        background-color: #f1f1f1;
        height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
        background-color: #555;
        color: white;
        padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
        .sidenav {
            height: auto;
            padding: 15px;
        }

        .row.content {
            height: auto;
        }
    }

    .affix {
        top: 0;
        width: 100%;
    }

    #logo{
         margin: auto;
    }

all solutions are effective but just to the small-size screen , when I scale it to the large-size , it goes back to the left side ...

Answer 1

更改徽标 css 属性其工作徽标中心

<pre>
#logo{
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    text-align: -ms-center;
}
</pre>

Answer 2

这是适用于您的全宽屏幕的 100% 有效答案，同时还包含最佳实践。

步骤：1 将 class 名称 'navbar-header' 的 <div> tag 替换为 .html 文件中的以下内容：

<div class="navbar-header navbar-custom">

步骤：2 将您的 <a> tag 替换为 .html 文件中的以下内容：

<a class="navbar-brand image-anchor" href="#" id="logo">

步骤：3 现在，在 css 文件中添加以下代码：

.image-anchor, .navbar-custom {
   width: 100%;
}

.image-anchor img {
   margin: 0 auto;
}

最佳实践：切勿在 css 中使用 id-selector。始终使用 class-选择器以获得 css 中的最佳实践。请从您的 .css 文件

中删除以下内容

#logo{
         margin: auto;
    }

这是更新的 jsfiddle：https://jsfiddle.net/ro49t472/4/

中心对齐不适用于导航栏上的 Bootstrap

center align doesn't work on the Bootstrap on the navigation bar

html

css

jsfiddle

web

twitter-bootstrap