How to move the third button down just on the iPhone.
-
There are three buttstreps. http://www.codeply.com/go/GDh0FNDe1r ) And I want the third button down on the iphones, and on the ipads and above, all three buttons to the line, but to keep the divine condition straight.
<div class="col-xs-6 col-sm-4">
They didn't work, but they were Margins/Padding buttons, because the buttons could be different.In the head:
Make 2 blocks
<div class="visible-xs">
and<div class="hidden-xs">
and make two blocks with buttons:<div class="col-xs-6 col-sm-4">
2 without these divas. But it has to be determined twice. ♪ ♪Use the media queries and connect the class only on iphones, and on the other mottoes, this class is not defined. Something like that.
<div class="pseudo-col-xs-6">
♪ But if there's a way in CSS to classify.pseudo-col-xs-6
other class.col-xs-6
♪.pseudo-col-xs-6
treated with columns as.col-xs-6
?
Or is there a better way?
Thank you!
-
Butstrap column classes are only wide for different screen sizes. In order to disconnect the width of the column on the big screen, it is sufficient to add such a media request:
@media (min-width: 992px) { .col-xs-6, .col-sm-4 { width: auto !important; } }
In order not to disrupt the rest of the vertigo, a class that manages the width of the column inside a particular row may be added. Check the result:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@media (min-width: 992px) {
.disable-the-width .col-xs-6,
.disable-the-width .col-sm-4 {
width: auto !important;
}
}.btn-group {
/* overflow: hidden; /
/ display: block; /
padding-top: 5px;
padding-bottom: 5px;
text-align: right;
/ float: right; /
border: 1px solid blue; / DEBUGGING /
}
.editor_btn_group button {
margin-left: 10px;
margin-right: 10px;
/ border: 2px solid maroon; DEBUGGING */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}<div class="container">
<div class="row disable-the-width">
<div class="btn-group pull-right editor_btn_group">
<div class="col-xs-6 col-sm-4">
<button type="button" class="btn btn-success" onclick="javascript:onSubmit(1);">Update&Reopen</button>
</div>
<div class="col-xs-6 col-sm-4">
<button type="button" class="btn btn-success" onclick="javascript:onSubmit(0);">Update&Listing</button>
</div>
<div class="col-xs-12 col-sm-4">
<button type="reset" class="btn btn-cancel-action" onclick="javascript:document.location='http://local-tb.com/admin/tour/index/page/1/filter_feature/F/filter_status/A'">Cancel</button>
</div>
</div>
</div>
</div>