Bootstrap - 浅色帆布尺寸
Bootstrap - Jasny Offcanvas Size
我正在开发一个使用 Bootstrap 3 和 Jasny 的应用程序。我的应用程序有一个使用 Jasny 构建的 slide-out 面板。在应用程序的主要区域,我有一个 "add" 按钮。当用户单击添加按钮时,我想使用 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">×</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>
我的问题是我似乎无法正确使用 rows/columns。您可以看到我将一个单元格的 background-color 指定为红色。但是,它只显示一行。此外,该列不会出现在与另一列相同的行中。我错过了什么?
您的 fiddle 适用于具有 small
屏幕尺寸的设备,正如您指定的那样
(使用 nav#mySlideout
中的 col-sm-xx
类)。如果您在 jsFiddle 上增加 'result' 框架的宽度,您可以看到在一定宽度 (768px
in 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
设置为 float: left;
并将 button
设置为 float: right;
并用 clearfix 围绕它们会更好 (like in this fork)。
我正在开发一个使用 Bootstrap 3 和 Jasny 的应用程序。我的应用程序有一个使用 Jasny 构建的 slide-out 面板。在应用程序的主要区域,我有一个 "add" 按钮。当用户单击添加按钮时,我想使用 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">×</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>
我的问题是我似乎无法正确使用 rows/columns。您可以看到我将一个单元格的 background-color 指定为红色。但是,它只显示一行。此外,该列不会出现在与另一列相同的行中。我错过了什么?
您的 fiddle 适用于具有 small
屏幕尺寸的设备,正如您指定的那样
(使用 nav#mySlideout
中的 col-sm-xx
类)。如果您在 jsFiddle 上增加 'result' 框架的宽度,您可以看到在一定宽度 (768px
in 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
设置为 float: left;
并将 button
设置为 float: right;
并用 clearfix 围绕它们会更好 (like in this fork)。