Skip to content
GitLab
Commit f9bee7de authored by Mark Otto's avatar Mark Otto
Browse files

fixes #16902: remove the .container-fluid from the grid system in modal... 

fixes #16902: remove the .container-fluid from the grid system in modal example since it's doubling up padding
parent cf2d9bfe
Hide whitespace changes
Inline Side-by-side
Showing
with 41 additions and 45 deletions
+41 -45
docs/_includes/js/modal.html
+ 41
- 45
View file @ f9bee7de
...@@ -219,7 +219,7 @@ $('#myModal').on('shown.bs.modal', function () { ...@@ -219,7 +219,7 @@ $('#myModal').on('shown.bs.modal', function () {
{% endhighlight %} {% endhighlight %}
<h2 id="modals-grid-system">Using the grid system</h2> <h2 id="modals-grid-system">Using the grid system</h2>
<p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.container-fluid</code> within the <code>.modal-body</code> and then use the normal grid system classes within this container.</p> <p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.row</code>s within the <code>.modal-body</code> and then use the normal grid system classes.</p>
<!-- sample modal content --> <!-- sample modal content -->
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel"> <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
...@@ -229,28 +229,26 @@ $('#myModal').on('shown.bs.modal', function () { ...@@ -229,28 +229,26 @@ $('#myModal').on('shown.bs.modal', function () {
<h4 class="modal-title" id="gridModalLabel">Modal title</h4> <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container-fluid"> <div class="row">
<div class="row"> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-sm-9">
<div class="col-sm-9"> Level 1: .col-sm-9
Level 1: .col-sm-9 <div class="row">
<div class="row"> <div class="col-xs-8 col-sm-6">
<div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-8 .col-sm-6 </div>
</div> <div class="col-xs-4 col-sm-6">
<div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -277,28 +275,26 @@ $('#myModal').on('shown.bs.modal', function () { ...@@ -277,28 +275,26 @@ $('#myModal').on('shown.bs.modal', function () {
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container-fluid"> <div class="row">
<div class="row"> <div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>
</div> <div class="row">
<div class="row"> <div class="col-sm-9">
<div class="col-sm-9"> Level 1: .col-sm-9
Level 1: .col-sm-9 <div class="row">
<div class="row"> <div class="col-xs-8 col-sm-6">
<div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-8 .col-sm-6 </div>
</div> <div class="col-xs-4 col-sm-6">
<div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
</div>
</div> </div>
</div> </div>
</div> </div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment