ブートストラップv4-Alpha 6 | .float -lg-right not working

私は、メニューナビゲーションの内容を.float-lg-right（正式な.pull-lg-right）を使って右に揃えて、ブートストラップのウェブサイトを作成しようとしています。問題はulが左に揃っていることです。興味深いのは、.float-md-rightを使用すると、コンテンツが縮小されたメニューの右に揃うことです。ブートストラップv4-Alpha 6 | .float -lg-right not working

<!DOCTYPE html> 
 
    <html lang="en"> 
 
     <head> 
 
      <!-- META DATA --> 
 
      <meta charset="utf-8"> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
      <meta name="description" content=""> 
 
      <meta name="author" content=""> 
 
      <title>TEXT</title> 
 
      <!-- CSS & ASSETS--> 
 
      <link href="css/bootstrap.min.css" rel="stylesheet"> 
 
     </head> 
 
     <body> 
 
      <nav class="navbar navbar-toggleable-md mb-4"> 
 
       <div class="container"> 
 
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" 
 
         data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" 
 
         aria-label="Toggle navigation"> 
 
        <span class="navbar-toggler-icon"></span> 
 
        </button> 
 
        <a class="navbar-brand" href="#">TEST</a> 
 
        <div class="collapse navbar-collapse" id="navbarCollapse"> 
 
         <ul class="navbar-nav mr-auto float-lg-right"> 
 
          <li class="nav-item"> 
 
           <a class="navlink" href="#">TEXT</a> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </nav> 
 
      <!-- SCRIPTS --> 
 
      <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" 
 
       integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" 
 
       crossorigin="anonymous"></script> 
 
      <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" 
 
       integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" 
 
       crossorigin="anonymous"></script> 
 
      <script src="js/bootstrap.min.js"></script> 
 
     </body> 
 
    </html>

出典

2017-01-14 nick123

私は同じ問題を抱えていたとV4アルファ6を持っている人は、主にこのような状況で立ち往生しています。私は数日間のブートストラップのドキュメントを見て、最終的に解決策を見つけました。さらに情報をご覧ください

<div class="d-flex justify-content-start"> 
    <div>Flex item</div> 
    <div>Flex item</div> 
    <div class="mr-auto p-2">Flex item</div> 
</div>

：右側に浮動について

<div class="d-flex justify-content-end"> 
    <div class="mr-auto">Flex item</div> 
    <div>Flex item</div> 
    <div>Flex item</div> 
</div>

：左側に浮上させる

https://v4-alpha.getbootstrap.com/utilities/flexbox/#with-justify-content

私はそのV4アルファをお勧めします6人のユーザーがすべきこの回答を見てください

出典

2017-01-16 21:19:28

フロート - * - 右 使用

フロートについて ML-自動 - * - 左 使用 MR-自動

出典

2017-01-31 12:49:56

私はちょうど発見した私は、クラスを除外した場合=特許要素上の「行」は、私の離婚でfloat-md-rightをclass = "col-12 col-md-5"とすることを許可しました。

<div> 
<div class="col-12 col-md-5 float-md-right"> 
This floats right 
</div> 
<div class="col-12 col-md-6 offset-md-6"> 
Thus is on left 
</div> 
</div>

出典

2017-03-12 07:06:00 Chase

ブートストラップv4-Alpha 6 | .float -lg-right not working

答えて

関連する問題