html - 如何在响应式 View 模式下将导航栏链接居中

标签 html css twitter-bootstrap

当导航栏在响应式 View 中折叠时，我需要通过折叠按钮将一些元素居中对齐

目前我不喜欢我的搜索框的填充方式，有没有办法让它更好地居中？

我的“铃铛通知图标”和“用户下拉菜单”目前位于左侧，我希望它们位于中间。

这是目前的样子: collapse mode

我希望它也适用于其他浏览器。

谢谢，这是我的代码:

body {
  padding-top: 102px;
  background-color: #4d4d4d;
  font-family: 'Lato', verdana, sans-serif;
}
.container {
  width: 1530px;
  margin-top: 0;
}
.navbar-fixed-top {
  background-color: #fff;
}
.navbar-header {
  min-height: 80px;
}
.hamburger-icon {
  margin-top: 20px;
}
.navbar-default .navbar-brand {
  line-height: 45px;
  font-size: 45px;
  color: #010101;
  text-transform: uppercase;
}
.navbar-default .navbar-brand span {
  font-style: normal;
  color: #ff5500;
}
.dropdown-toggle.inbox {
  margin-bottom: 5px;
}
.dropdown-menu.bell {
  background-color: #f8f8f8;
  border-radius: 0;
  box-shadow: 0;
}
.dropdown-menu.bell h4 {
  padding: 10px 0;
  color: #010101;
  text-align: center;
  display: block;
}
.dropdown-menu.bell li a {
  padding-top: 5px;
  padding-bottom: 5px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
  background-color: transparent;
}
.dropdown-menu.bell li.divider {
  padding: 0;
  margin: 0 20px;
}
.dropdown-menu.bell .label {
  background-color: transparent;
  color: #ff5500;
  font-weight: 100;
}
.badge-notify {
  background: #ff5500;
  margin-top: -24px;
  margin-left: -20px;
  height: 1.7em;
}
/* caret for notification dropdown */

.dropdown-menu.bell:before {
  position: absolute;
  top: -10px;
  right: 10%;
  display: inline-block;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.dropdown-menu.bell:after {
  position: absolute;
  top: -9px;
  right: 10%;
  display: inline-block;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #f8f8f8;
  border-left: 9px solid transparent;
  content: '';
}
.user span.fullname {
  font-size: 14px;
  color: #010101;
  font-weight: 400;
}
.user span:last-child {
  padding-right: 10px;
}
.user span:first-child {
  padding-right: 30px;
  padding-left: 10px;
}
.user .dropdown-menu.user-list {
  width: 100%;
  border-radius: 0;
  border: 0;
  background-color: #f8f8f8
}
.user .dropdown-menu.user-list li a {
  margin: 5px 0px;
  color: #010101;
}
.user .dropdown-menu.user-list li a:hover {
  background-color: transparent;
  color: #ff5500;
}
.user .dropdown-menu.user-list li.divider {
  padding: 0;
  margin: 0 20px;
}
/* Large desktop */

@media (max-width: 1590px) {
  .container {
    width: auto;
  }
}
/* Portrait tablet to landscape and desktop */

@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */

@media (max-width: 768px) {
  .container {
    width: auto;
  }
  .dropdown.bell .inbox {
    width: 100% !important;
  }
  .dropdown-menu.bell h4 {
    margin: 0 0;
  }
  .dropdown-menu.bell:before,
  .dropdown-menu.bell:after {
    display: none;
  }
}
/* Landscape phones and down */

@media (max-width: 480px) {} .search .input-group {
  padding-top:15px;
  font-family:'Lato',
  sans-serif;
}
.search .input-group input.search-field {
  padding: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background-color: #fff;
  font-size: 18px;
  font-weight: 100;
}
.search .input-group input.search-field:hover {
  background-color: transparent;
}
.search .input-group-btn button {
  padding: 2px;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  border-radius: 0;
}
.search .input-group-btn button:hover {
  background-color: #f8f8f8;
  color: #ff5500;
}
.search .input-group-btn .glyphicon-search {
  font-size: 22px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>


<div class="container">
  <div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a href="#" class="navbar-brand">logo<span>here</span></a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">

          <!-- search bar -->
          <li class="dropdown search">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
                  </button>
                </div>
              </div>
            </form>
          </li>

          <!-- notification bell -->
          <li class="dropdown bell">
            <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
              <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
              <span class="badge badge-notify">1</span>
            </a>
            <ul class="dropdown-menu bell" role="menu">
              <li>
                <h4 class="menu-title">Notifications</h4>
              </li>
              <li><a href="#"><span class="label label-default">4:00 AM</span>Favourites Snippet</a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
                            design</a>
              </li>
              <li class="divider"></li>
              <li><a href="#" class="text-center">View All</a>
              </li>
            </ul>
          </li>

          <!-- user login information -->
          <li class="dropdown user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
              <span class="fullname">Jacky Smith</span>
              <span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
            </a>

            <ul class="dropdown-menu user-list" role="menu">
              <li><a href="#">Action</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">Another action</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>dfsjfhskfs</p>


      <!-- <div class="chevron right">
			  <a href="#"></a>
			</div>

			<div style="height: 1em;">
			</div> -->




    </div>
  </div>
</div>

</div>

最佳答案

希望对你有所帮助，如果你想集中搜索输入，虽然我会做一个宽度并缩小一点

EXAMPLE BOOTPLY

关于html - 如何在响应式 View 模式下将导航栏链接居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36893583/

上一篇：html - Bootstrap 4 li 标签不作为 block 元素对齐

下一篇：PHP Echo 表列对齐

相关文章：

html - 在html或css中指定图像大小的区别

javascript - 将导航栏登录下拉菜单更改为注销 ajax

html - 问题对齐页脚文本中心

javascript - html页面中的div样式

html - parent 高度自动的 child 的动态高度

html - 按钮元素不遵守文本溢出 : ellipsis container

html - 将 css 下拉菜单对齐到中心

javascript - 你如何从 JavaScript 文件中抽象出 HTML 模板文字到一个单独的文件，然后将其导入回来？

javascript - 使用 Electron (NightareJS) 重复单击页面上的元素

html - HTML/CSS 中的下拉菜单

©2024 IT工具网  联系我们