Question

我有一个导航栏，其中包含一个搜索栏，然后是汉堡包菜单。我难以保持这些元素的中心。当我在不同的移动屏幕尺寸之间切换时，元素位置会发生变化

这是html：

            <div class="col-xs-12" id="mobile-search">                 

              <div class="search-area">

                <ul class="search-bar" id="mobile-go">
                  <li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
                  </li>
                  <li class="search-wrapper no-wrap">
                    <div class="no-wrap search-box" id="mobile-center">
                      ##SEARCHBOX[autocomplete=true]##
                    </div>
                  </li>
                </ul>
              </div>
            </div>

          </div>

我希望ul元素始终居中，但添加col coline类什么也没做。我还应该尝试什么？

编辑：头文件的完整代码：

<ac:pagelayout id="HeaderPage">

  <div class="LayoutTopTop">
    <div class="row">
      <div class="col-sm-12 hidden-xs">
        <ac:widgetarea id="HeaderBar"><ac:widget id="HTML3742" type="HTML"><div class="top-bar">

          <ac:if setting="Show Phone Number in Header">
            <div class="top-bar-info"><strong>##STOREPHONE##</strong></div>              
          </ac:if>
          <ac:if setting="Show Email Address in Header">
            <div class="top-bar-info"><strong> <a class="inherit no-ul color-inherit" href="mailto:##STOREEMAIL##">##STOREEMAIL##</a></strong></div>
          </ac:if>

          </div></ac:widget>
        </ac:widgetarea>
      </div>
    </div>
    <div class="row top-header">
      <div class="col-sm-7 contentCentered hidden-xs ">
        <ac:widgetarea id="UtilNavArea"><ac:widget id="HTML3744" type="HTML">
          <a href="/">
            <img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech ">
          </a>         
          </ac:widget>
        </ac:widgetarea>


      </div>
      <div class="col-sm-4 col-sm-push-1 hidden-xs ">
        <ul class="header-nav nav navbar-nav ">
          <ac:if setting="Show Search as Dropdown">
            <li><a href="#" data-toggle="dropdown">
              <i class="icon-search"></i>
              <span class="visible-xs visible-lg">Search</span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <div class="panel-body no-wrap search-box" id="nav-search">
                    ##SEARCHBOX[autocomplete=true]##
                  </div>
                </li>
              </ul>
            </li>
          </ac:if> 

          <li>
            <ac:if setting="Show Customer Login as Dropdown">
              <a href="#" data-toggle="dropdown">
                <i class="icon-user"></i>
                <span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
              </a>
              <ul class="dropdown-menu">
                $$CUSTOMERLOGIN3739$$
              </ul>
              <ac:else>
                <a href="/store/myaccount.aspx">
                  <i class="icon-user"></i>
                  <span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
                </a>
              </ac:else>
            </ac:if>
          </li>
          <li class="no-wrap">
            <ac:if setting="Show Shopping Cart as Dropdown">
              <a href="#" data-toggle="dropdown">
                <div class="in-block"><i class="icon-shopping-cart"></i></div>
                <span class="visible-xs visible-lg">Shopping Cart</span>
                ##IF[CartIsEmpty]## ##ELSE##
                <span class="badge">##CARTITEMSCOUNT##</span>
                ##ENDIF##
              </a>
              <ul class="dropdown-menu">
                <li>
                  ##IF[CartIsEmpty]##
                  <p class="m-20">Your cart is empty!</p>
                  ##ENDIF##
                  $$SMALLSHOPPINGCART3740$$
                </li>
              </ul>

              <ac:else>
                <a href="/store/shopcart.aspx" rel="nofollow">
                  <div class="in-block"><i class="icon-shopping-cart"></i></div>
                  <span class="visible-xs visible-lg">Shopping Cart</span>
                  ##IF[CartIsEmpty]## ##ELSE##
                  <span class="badge">##CARTITEMSCOUNT##</span>
                  ##ENDIF##
                </a>
              </ac:else>
            </ac:if>
          </li> 
        </ul></div> <!-- just added-->
    </div>
    <ac:widgetarea id="TopHeaderWidgets"><ac:widget id="MENUBAR3738" type="MenuBar" linkgroupid="1">
      <ac:visibilityarea id="dvControl">
        $$ADMINHELP$$<div id="little">
          <header class="top"></header>
          <div id="nav">
            <div>
              <img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech " id="top-logo">

            </div>
            <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation" data-spy="affix" data-offset-top="60">
              <div class="navbar-header">

                <div class="col-xs-12" id="mobile-search">                 

                  <div class="search-area">

                    <ul class="search-bar" id="mobile-go">
                      <li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
                      </li>
                      <li class="search-wrapper no-wrap">
                        <div class="no-wrap search-box" id="mobile-center">
                          ##SEARCHBOX[autocomplete=true]##
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>

              </div>
              <div class="collapse navbar-collapse" id="navbar-collapse-1">

              </div>
              <!-- /.navbar-collapse -->
            </nav>
          </div>
        </div><!--end of mobile-->

Answer 1

尝试使用容器类将您的ul元素或任何内容包含在div中。

<div class="container"> 
   Put Content Here
</div>

保持元素在引导导航栏中居中

1 个答案: