1

Bootstrap 3 と Jasny を使用するアプリに取り組んでいます。私のアプリには、Jasny で構築されたスライドアウト パネルがあります。アプリのメインエリアに「追加」ボタンがあります。ユーザーが追加ボタンをクリックすると、Jasny を使用していくつかのフォーム要素を表示したいと考えています。これを行うために、次のJSFiddleがあります。次のコードが含まれます。

<header>
  <nav class="navbar" style="background-color:#2e2e2e; border-radius:0rem;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand hidden-xs" href="/" style="color:white;">Welcome</a>        
      </div>
    </div>    
  </nav>
</header>

<main>
  <nav class="navbar" style="background-color:#5e5e5e; border-radius:0rem; position:relative; top:-20px;">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
          <span class="sr-only">Toggle navigation</span>
        </button>
        <a class="navbar-brand hidden-xs" href="/" style="color:white;">Subnav</a>        
      </div>
    </div>  
    </nav>

  <div class="container-fluid">    
    <div class="container">
      <button class="btn btn-primary" data-toggle="offcanvas" data-target="#mySlideout">Add Item</button>

      <nav id="mySlideout" class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation" style="width:400px; margin-top:50px;">
        <div class="row">
          <div class="col-sm-11">
            <h3>
            Add New Item
            </h3>
          </div>

          <div class="col-sm-1" style="background-color:red;">
<button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>          
          </div>
        </div>

        <form id="addForm" action="/add" method="post" role="form">
          <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                  <label class="control-label" for="Name">Name</label>  
                  <input class="form-control" id="Name" name="Name" type="text" value="" autocomplete="off">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-5">
                <button class="btn btn-default">Cancel</button>
                <button class="btn btn-primary">Save</button>
            </div>
        </div>
    </form>
</nav>      
    </div>
  </div>
</main>

私の問題は、行/列を適切に使用できないように見えることです。1 つのセルの背景色を赤に割り当てたことがわかります。ただし、線を表示するだけです。また、その列は他の列と同じ行には表示されません。私は何が欠けていますか？

4

1 に答える 1

0

あなたのフィドルは、あなたが指定したのと同じように（内のクラスsmallを使用して）、画面サイズのデバイスで機能します。jsFiddle で「結果」フレームの幅を広げると、特定の幅 ( Bootstrap 3 ) で設定が実際に適用されることがわかります。col-sm-xxnav#mySlideout768px

xsブートストラップ グリッドは、可能な画面サイズ ( 、sm、md、 )の列サイズを指定しない場合lg、次に小さい使用可能なサイズの設定を自動的に使用するように構築されています。ただし、超小型デバイス ( ) には何も指定しなかったためcol-xs-xx、Bootstrap はそれぞれの列 (この場合はすべて) を全角にします。

簡単に言えば：

とをとにそれぞれ置き換えるcol-sm-11と、目的の効果が得られます。col-sm-1col-xs-11col-xs-1

あなたが考慮したいかもしれないこと

スライドアウトはページ全体をカバーしていないため、異なる画面サイズに異なる列サイズを同じ列に割り当てると、スライドアウトに含まれるグリッドが奇妙に動作する場合があります (例: col-xs-12 col-sm-6 col-lg-3)。これは、グリッドがスライドアウトのサイズではなく、ページ全体のサイズに応答するためです。したがって、このような条件下でグリッドのような効果を実現したい場合は、CSS3 のフレックスボックスを検討する価値があります。

代替ソリューション

そもそも、その特定のユース ケースにグリッドを使用するつもりはありません。h3私の意見では、 afloat: left;とbuttonwithをスタイリングし、float: right;それらを clearfix で囲むだけでさらに良くなります (この fork のように)。

于 2016-05-06T13:52:26.740 に答える