bootstrap网格无法正常工作

Question

图片右侧是我的网站。一些元素来自bootstrap网格。

shape=(1000,)

为什么元素导航可以从引导网格中输出？我的主要部分是灰色

Answer 1

不确定您的标记或样式有什么问题，从给定的内容中很难理解，但您应该.col-md-12放在.row内而不是相反。

以下是一些示例：https://getbootstrap.com/examples/grid/

Answer 2

我肯定会熟悉如何使用bootstrap构建HTML和CSS类。您需要从容器类开始（例如，class =＆＃34; container＆＃34;）。容器内部有行（class =＆＃34; row＆＃34;），行内是你的列（例如.class =＆＃34; col-md-12＆＃34;）。

查看此页面：http://getbootstrap.com/css/

如果您希望在引导程序中构建导航，则无需重新发明轮子并可以使用其导航栏模板：http://getbootstrap.com/examples/navbar/

可能这样的事情对你有用：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-xs-3">
          <a href="#" class="logo">First</a>
        </div>
        <div class="col-xs-9">
          <nav class="main_menu clearfix">
            <button class="main_menu_button hidden-md hidden-lg">menu</button>
            <ul>
              <li class="active"><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
            </ul>
          </nav>
       </div>
      </div>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你应该尝试使用bootstrap4类。

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar">
  <li class="nav-item"><a class="nav-link" href="#">Home</li>
  <li class="nav-item"><a class="nav-link" href="#">career</li>
  <li class="nav-item"><a class="nav-link" href="#">Contact</li>
  <li class="nav-item"><a class="nav-link" href="#">about</li>
</ul>
</div>
</nav>

如果您想要进行垂直导航，请在导航标记中删除navbar-expand类。