Question

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

我需要将“triMago”分支图像放在导航栏的中心

但它不适用于 margin：auto;

等常见解决方案

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

我的代码：

<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;
    }

<小时/>

所有解决方案都有效但只适用于小尺寸屏幕，当我将它缩放到大尺寸时，它会回到左侧......

Answer 1

这是全宽屏幕的100％工作答案，也是最佳做法。

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

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

步骤：2 将。{1}}替换为.html文件中的以下内容：

<a> tag

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

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

最佳做法：永远不要在css中使用id-selector。始终使用类选择器来获得css中的最佳实践。请从.css文件中删除以下内容

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

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

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

Answer 2

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

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

中心对齐在导航栏

2 个答案: