오른쪽 탐색 바에 텍스트가 떠 있습니다.

내 탐색 바가 오른쪽으로 움직이기를 바랍니다. <ul class="nav navbar-nav float="right"을 설정하려했지만 navbar가 여전히 중앙에 있습니다. 나는이 부표가이 꼬리표에 있어야한다고 확신한다. 나는 또한 text-align:right;으로 시도했으나 작동하지 않았다.오른쪽 탐색 바에 텍스트가 떠 있습니다.

여기에 누락 된 것이 있습니까?

HTML

<!-- page wrapper start --> 
     <!-- ================ --> 
     <div class="page-wrapper"> 

      <!-- header-container start --> 
      <div class="header-container"> 

       <!-- header start --> 
       <!-- classes: --> 
       <!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" --> 
       <!-- "dark": dark version of header e.g. class="header dark clearfix" --> 
       <!-- "full-width": mandatory class for the full-width menu layout --> 
       <!-- "centered": mandatory class for the centered logo layout --> 
       <!-- ================ --> 
       <header class="header fixed clearfix"> 

        <div class="container"> 
         <div class="row"> 
          <div class="col-md-3 "> 
           <!-- header-left start --> 
           <!-- ================ --> 
           <div class="header-left clearfix"> 

            <!-- header dropdown buttons --> 
            <div class="header-dropdown-buttons visible-xs"> 
             <div class="btn-group dropdown"> 
              <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button> 
              <ul class="dropdown-menu dropdown-menu-right dropdown-animation"> 
               <li> 
                <form role="search" class="search-box margin-clear"> 
                 <div class="form-group has-feedback"> 
                  <input type="text" class="form-control" placeholder="Search"> 
                  <i class="icon-search form-control-feedback"></i> 
                 </div> 
                </form> 
               </li> 
              </ul> 
             </div> 
            </div> 
            <!-- header dropdown buttons end--> 

            <!-- logo --> 
            <div id="logo" class="logo"> 
             <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php"><img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" ></a> 
            </div> 

           </div> 
           <!-- header-left end --> 

          </div> 
          <div class="col-md-9"> 

           <!-- header-right start --> 
           <!-- ================ --> 
           <div class="header-right clearfix"> 

           <!-- main-navigation start --> 
           <!-- classes: --> 
           <!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" --> 
           <!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" --> 
           <!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns --> 
           <!-- ================ --> 
           <div class="main-navigation animated with-dropdown-buttons"> 

            <!-- navbar start --> 
            <!-- ================ --> 
            <nav class="navbar navbar-default" role="navigation"> 
             <div class="container-fluid"> 

              <!-- Toggle get grouped for better mobile display --> 
              <div class="navbar-header"> 
               <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> 

              </div> 

              <!-- Collect the nav links, forms, and other content for toggling --> 
              <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
               <!-- main-menu --> 
               <ul class="nav navbar-nav" float="right"> 

                <!-- mega-menu start --> 
                <li class="mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php">Hjem</a> 
                </li> 
                <!-- mega-menu end --> 

                <!-- mega-menu start --> 

                <li class="dropdown mega-menu"> 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Kompetencer</a> 
                 <ul class="dropdown-menu"> 
                  <li> 
                   <div class="row"> 
                    <div class="col-lg-8 col-md-9"> 

                     <div class="row"> 
                      <div class="col-sm-4"> 
                       <h4 class="title">UX/UI</h4> 
                       <div class="divider"></div> 
                       <ul class="menu"> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/ux-ui.php"><i class="fa fa-angle-right"></i>UX/UI</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/prototyping.php"><i class="fa fa-angle-right"></i>Prototyping</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/web-design.php"><i class="fa fa-angle-right"></i>Web Design</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/grafisk-design.php"><i class="fa fa-angle-right"></i>Grafisk Design</a></li> 
                       </ul> 
                      </div> 
                      <div class="col-sm-4"> 
                       <h4 class="title">Webudvikling</h4> 
                       <div class="divider"></div> 
                       <ul class="menu"> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/webudvikling.php"><i class="fa fa-angle-right"></i>Webudvikling</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/php-mysql.php"><i class="fa fa-angle-right"></i>PHP & MySQL databaser</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/wordpress.php"><i class="fa fa-angle-right"></i>Wordpress</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/umbraco.php"><i class="fa fa-angle-right"></i>Umbraco</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/joomla.php"><i class="fa fa-angle-right"></i>Joomla</a></li> 
                       </ul> 
                      </div> 
                      <div class="col-sm-4"> 
                       <h4 class="title">Marketing Automation</h4> 
                       <div class="divider"></div> 
                       <ul class="menu"> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/mautic.php"><i class="fa fa-angle-right"></i>Mautic</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/landesider.php"><i class="fa fa-angle-right"></i>Landesider</a></li> 
                       </ul> 
                      </div> 
                     </div> 
                    </div> 
                    <div class="col-lg-4 col-md-3 hidden-sm"> 
                     <h4 class="title">Oversigt over kompetencer</h4> 
                     <p class="mb-10"><a href=" http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/alle-kompetencer.php"><u>En oversigt over alle mine kompetencer</u></a></p> 
                     <img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project"> 
                    </div> 
                   </div> 
                  </li> 
                 </ul> 
                </li> 
                <li class="mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST']?>/portfolio.php">Portfolio</a> 
                </li> 

                <!-- mega-menu end --> 
                <li class="dropdown "> 
                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a> 
                 <ul class="dropdown-menu"> 
                  <li><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/uddannelse.php">Uddannelse</a></li> 
                  <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/erhvervserfaring.php">Erhvervserfaring</a></li> 
                  <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/personlighed.php">Personlighed</a></li> 
                 </ul> 
                </li> 
                <li class="mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST']?>/artikler-index.php">Artikler</a> 
                </li> 

                <!-- mega-menu start --> 
                <!-- mega-menu start --> 
                <li class="mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kontakt.php">Kontakt</a> 
                </li> 


               </ul> 
               <!-- main-menu end --> 


              </div> 

             </div> 
            </nav> 
            <!-- navbar end --> 

           </div> 
           <!-- main-navigation end --> 
           </div> 
           <!-- header-right end --> 

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

       </header> 
       <!-- header end --> 
      </div> 
      <!-- header-container end -->

출처

2016-12-25 Ne Kr

은 왼쪽에 위치하는 몇 가지 이유가 있습니다. 먼저 nav가있는 컨테이너를 대상으로 지정해야합니다. 오른쪽에 패딩이 있습니다. 다음을 제거하십시오 :

.with-dropdown-buttons .navbar-default .navbar-collapse { 
    padding-right: 0; 
}

그런 다음 네비게이션 바를 오른쪽으로 유동시킬 수 있지만 화면 너비에 대해 구체적으로 설명해야합니다.

@media (min-width: 768px) { 
    .navbar-nav { 
    float: right; 
    } 
}

개발자 도구에서 이러한 변경 작업을 수행 할 때 유용합니다. 작동하지 않으면 부트 스트랩 CSS를 올바르게 무시하는지 또는! important를 사용할 수 있는지 확인해야합니다.

편집

또한, 마지막 메뉴 항목에 패딩을 제거하기 위해 컨테이너의 가장자리가 플러시 수 있도록 할 수 있습니다. 시도해 볼 수 있습니다 :

.navbar-default .navbar-nav > li:last-child > a { 
    padding-right: 0; 
}

출처

2016-12-25 12:44:29 sol

고맙습니다. 매력처럼 작동합니다. –

@NeKr 환영합니다 :) – sol

float은 CSS 속성입니다. 다음과 같이 사용할 수 있습니다.

<ul class="nav navbar-nav" style="float: right;"> 
... 
</ul>

UL은 블록 태그이며 모든 너비를 포함합니다. 따라서 창 너비를 모두 채우지 않으려면 너비 속성도 설정해야합니다.

<ul class="nav navbar-nav" style="float: right; width: 800px;"> 
... 
</ul>

출처

2016-12-25 12:44:59

오른쪽 탐색 바에 텍스트가 떠 있습니다.

답변

관련 문제