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>

我的问题是我似乎无法正确使用行/列。您可以看到我为一个单元格指定了背景颜色为红色。但是，它只显示一行。此外，该列不会与另一列出现在同一行。我错过了什么？

4

1 回答 1

0

您的小提琴适用于具有small屏幕尺寸的设备，就像您指定的那样（使用col-sm-xx里面的类nav#mySlideout）。如果您在 jsFiddle 上增加“结果”框架的宽度，您可以看到在一定宽度（768px在 Bootstrap 3 中）您的设置确实适用。

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值得一看。

替代解决方案

首先，我不会为该特定用例使用网格。在我看来，简单地h3用 afloat: left;和buttonwith设置样式float: right;并用 clearfix 包围它们会更好（就像在这个 fork 中一样）。

于 2016-05-06T13:52:26.740 回答