Bootstrap - Jasny Offcanvas尺寸

Question

我正在使用一個使用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>

我的問題是我似乎無法正確使用行/列。 您可以看到我為一個單元格將背景顏色指定為紅色。 但是，它只顯示一條線。 此外，該列不會出現在與另一列相同的行上。 我錯過了什么？

Answer 1

您的小提琴適用於屏幕尺寸small設備，就像您指定的那樣（使用nav#mySlideout的col-sm-xx類）。 如果你增加jsFiddle上'result'框架的寬度，你可以看到在某個寬度（ Bootstrap 3中為768px ）你的設置確實會適用。

構建Bootstrap網格，以便在沒有為任何可能的屏幕大小（ xs ， sm ， md ， lg ）指定列大小時，它將自動使用下一個較低的可用大小設置。 但是，由於您沒有為超小型設備（ col-xs-xx ）指定任何內容，因此Bootstrap將使各自的列（在您的情況下為所有這些列）全寬。

長話短說：

如果將col-sm-11和col-sm-1替換為col-xs-11和col-xs-1 ，則可以獲得所需的效果。

你可能想要考慮什么

由於您的滑出不會覆蓋整個頁面，因此當您為不同的屏幕大小分配不同的列大小到同一列時，它包含的網格可能會出現奇怪的行為（例如col-xs-12 col-sm-6 col-lg-3 ）。 這是因為網格仍然響應整個頁面的大小而不是幻燈片的大小。 因此，如果你想在這樣的條件下實現網格效果， CSS3的flexboxes值得一看。

替代方案

我不會首先使用特定用例的網格。 只需用float: left;設計h3造型float: left; 和float: right; button float: right; 在我看來，用clearfix包圍它們會更好（ 比如在這個fork中 ）。