Question

我正在尝试重新定位导航栏内的搜索表单/按钮，但问题仍然存在。我的CSS已经多次更改，我已经获得了移动的表单和按钮，但是进入了更改导航栏或搜索表单的weir对齐。这是我当前的CSS，它显示默认引导程序状态没有任何变化。我想让搜索表单稍微长一点，并使条形图和表单稍微向下移动到左侧，与导航列表保持一致：

<html>
<head>

<!-- Imported documents -->


<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/styles.css">


<meta charset="utf-8">

<title>TesterPage.</title>

</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top">

  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <!-- Brand Logo -->
      <a class="navbar-brand" href="#">
          <img alt="Brand" src="assets/logo.gif" class="img-responsive" id="brandImage" />
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#">About</a>
        </li>
        <li class="dropdown">
          <a href="#">Blog</a>
        </li>
        <li class="dropdown">
          <a href="#">Resume</a>
        </li>
        <li class="dropdown">
          <a href="#">Portfolio</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
            <label for="search" class="sr-only">Search Bar</label>
            <input type="text" name="search" class="form-control" placeholder="Search" />
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS：

.container {
    background:#30302f;
}

.container a{
  color: #fff;

}

.container a:hover{
    text-decoration: underline;
    color: #fff;
}


.menuIcon {
    background:rgb(200,200,200);
}

.navbar-brand {
    height:auto;
}

.navbar-default {
  background-color: #30302f;
}

.navbar-default .navbar-nav>li>a {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 14px;
  top: 16px;
  left: -50px;
  text-transform: uppercase;
}

.navbar-form .navbar-right .form-class{
    left: -30px;
    top: 100px;
}
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
  text-decoration: underline;

}

#brandImage {
    max-width:60%;
}

@media (max-width:600px) {

    .navbar-brand {
    width:95%;
    padding:8px 2.5%;
    }

    #brandImage {
    max-width:100%;
    }
}

@media (min-width:990px) and (max-width:1200px) {
    .navbar-brand {
    width:250px;
    }
}

非常感谢！

编辑：我仍然尝试编辑CSS代码，它会将我的导航标题滑动到索引的左侧，并在其他工作页面中将其错位：/

在导航栏中更改搜索表单的状态/位置

0 个答案: