Question

第一个问题；我对Bootstrap / CSS的了解很少，并且已经从各个地方复制了代码，并亲自进行了修改以使我的解决方案有效。第二个问题；我知道我需要容器/行/列，但不确定如何将它们适当地嵌套在导航栏（永久固定在左侧）周围以及背景图片的顶部。这是针对移动Web应用程序的，我想创建位于背景图片上方的表单。

我花了整整2天的时间研究并在现有代码周围插入容器，行，列，但所能实现的只是移动布局，将导航栏移至中心，文本显示在图像上方或下方，但不在图像上方图片。背景图片设置在头部的CSS中，代码如下。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background: url("Red_polygon.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar-custom {
  background-color: rgba(22, 22, 22, 1)
}

.thumbnail {
  float: left;
  margin: 2px 0px 2px 2px;
  background: transparent;
  border: 0 none;
  box-shadow: none;
}

<nav class="navbar navbar-custom navbar-fixed-top">
  <div class="thumbnail" border="0">
    <img src="ASD_header_logo.png" alt="Active Software Development" width=277 height=76 />
  </div>
</nav>

<body>
  <nav class="navbar navbar-custom navbar-fixed-top">
    <div class="thumbnail" border="0">
      <img src="ASD_header_logo.png" alt="Active Software Development" width=277 height=76 />
    </div>
  </nav>


  <div class="bg">
    <div class="wrapper">
    </div>
    <nav id="sidebar">
      <ul class="list-unstyled components">
        <p>
          <center>
            <h4>Management Information System</h4>
          </center>
        </p>
        <li>
          <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Project nav</a>
          <ul class="collapse list-unstyled" id="pageSubmenu">
            <li>
              <a href="#">Projects</a>
            </li>
            <li>
              <a href="#">Activities</a>
            </li>
            <li>
              <a href="#">Tasks</a>
            </li>
            <li>
              <a href="#">Staff</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Help</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
      <ul class="list-unstyled components">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Logout</a>
        </li>
      </ul>
    </nav>
  </div>

我期望我在构造导航栏和背景图像方面做得不正确，只是想知道是否有人可以帮助我了解我做错了什么以及如何纠正它。对于大量代码，我深表歉意，但是在我尝试了很多东西之后，我不确定什么是相关的，什么不是。预先感谢您，并致以诚挚的问候。

Answer 1

我插入了一个非常基本的结构来合并您上面提到的内容。但是，不确定上面提到的代码是否打算使用。因此，如果您需要更多帮助，让我们进一步谈谈。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background: url("https://www.publicdomainpictures.net/pictures/130000/velka/abstract-magical-background.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar-custom {
  background-color: rgba(22, 22, 22, 1)
}

.thumbnail {
  float: left;
  margin: 2px 0px 2px 2px;
  background: transparent;
  border: 0 none;
  box-shadow: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body class="">
  <nav class="navbar navbar-custom navbar-fixed-top">
    <div class="thumbnail" border="0">
      <img src="ASD_header_logo.png" alt="Active Software Development" width=277 height=76 />
    </div>
  </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-2">
         <nav id="sidebar">
        <ul class="list-unstyled components">
          <p>
            <center>
              <h4>Management Information System</h4>
            </center>
          </p>
          <li>
            <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Project nav</a>
            <ul class="collapse list-unstyled" id="pageSubmenu">
              <li>
                <a href="#">Projects</a>
              </li>
              <li>
                <a href="#">Activities</a>
              </li>
              <li>
                <a href="#">Tasks</a>
              </li>
              <li>
                <a href="#">Staff</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Help</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
        <ul class="list-unstyled components">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Logout</a>
          </li>
        </ul>
      </nav>
        </div>
        <div class="col-10">
        <div class="bg">
        <form class="text-white">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
        </div>
        </div>
      </div>
     
    </div>
  </body>

如何在bg图片上方和导航栏旁边添加表格

1 个答案: