Question

我正在学习如何使用Bootstrap创建wordpress主题。

这是HTML代码 -

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12" id="site_header">
        <hr>
        <h1>CYBER<sup>FOSTERS</sup></h1>
        <hr>
      </div>
    </div>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header"  >
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">CF</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Program Implementation</a></li>
            <li><a href="#">About</a></li>
           </ul>
        </div>
      </div>
    </nav>
  </div> 
</body>

这是CSS代码

root  
    display: block;
}
body {
    background-color: lightgrey;
}
#site_header {
    background-color: white;
    margin:10px 0px 0px 0px;
    text-shadow: 2px 2px 0px #fff, 4px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    box-shadow: 0px 3px 3px grey;
}
#site_header h1 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 50px;
    text-align: center;
}

.navbar-default {
    background-color: white;
    border-color: white;
    border-radius:2px;
    margin-top:10px;
    font-family:monospace;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow: 0px 3px 3px grey;
}

该网站目前看起来像这样 - enter image description here

我无法增加导航栏的宽度，使其与上方的 div 块对齐。我该怎么办？

Answer 1

您必须将导航块放在其他div类.row

中

您可以通过此链接结帐：http://jsfiddle.net/oco0yypn/2/

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12" id="site_header">
                <hr/>
                <h1>CYBER<sup>FOSTERS</sup></h1>
                <hr/>
            </div>
        </div>
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                    </button>
                    <a class="navbar-brand" href="#">CF</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Program Implementation</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</body>

Answer 2

将其放在另一行中，列数相同。像这样的东西（虽然还没有测试过！）。它应该工作。

<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12" id="site_header">
            <hr>
            <h1>CYBER<sup>FOSTERS</sup></h1>
            <hr>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header"  >
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                        </button>
                        <a class="navbar-brand" href="#">CF</a>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Program Implementation</a></li>
                            <li><a href="#">About</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
         </div>
    </div>
</div> 
</body>

如何将bootstrap导航菜单与另一个div对齐？

2 个答案: