There are three bootstrap buttons ( codeply ) and I want the third button on the iphone to slide down, and on the ipad and above all three buttons are on the line, but that the divine conditions <div class="col-xs-6 col-sm-4"> did not work, but the margins / paddings of the buttons worked, because the buttons can be of different widths.

Comes to mind:

  1. Make 2 blocks <div class="visible-xs"> and <div class="hidden-xs"> , and make 2 blocks with buttons: in the first with <div class="col-xs-6 col-sm-4"> , in the 2nd without these divs. But it is necessary to define the button twice ...

  2. Use media queries and connect the class only on iphones, and on other devices this class cannot be defined. Something like <div class="pseudo-col-xs-6"> . But is it possible in CSS to assign the properties of another .col-xs-6 class to the .pseudo-col-xs-6 class so that the .pseudo-col-xs-6 processed when the column is .col-xs-6 as .col-xs-6 ?

Or is there a better way?
Thank!

    2 answers 2

    The bootstrap column classes differ only in width for different screen sizes. To disable the width of the column on the big screen, just add this media query:

     @media (min-width: 992px) { .col-xs-6, .col-sm-4 { width: auto !important; } }

    In order not to bring down the rest of the layout, you can add a class that controls the width of the columns inside a particular row. 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&amp;Reopen</button> </div> <div class="col-xs-6 col-sm-4"> <button type="button" class="btn btn-success" onclick="javascript:onSubmit(0);">Update&amp;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>

      Thank you, something began to turn out. If I understand you correctly:

      I connect different css files according to the device:

      One of the 3 buttons should move a line lower if the width is less than 768px. In other cases, all 3 buttons in the 1st line.

      Definition

       .col-xs-6, .col-sm-4 { width: auto !important; }

      I inserted ONLY in the style_sm.css file

      Definition

        .disable-the-width .col-xs-6, .disable-the-width .col-sm-4 { width: auto !important; border: 1px solid green; }

      I inserted into the style_sm.css, style_md.css, style_lg.css files but did not insert into the style_xs.css

      And made a layout:

        <div class="row disable-the-width"> <div class=" btn-group pull-right editor_btn_group col-sm-offset-right-2" > <div class="col-xs-6 col-sm-4"> <button type="submit" class="btn btn-default" name="login-submit" id="login-submit" >Register Operator</button> </div> <div class="col-xs-6 col-sm-4"> <button type="reset" class="btn btn-cancel-action" value="Cancel">Medium Button</button> {# style="margin-left: 20px; margin-right: 10px;"#} </div> <div class="col-xs-12 col-sm-4"> <button type="reset" class="btn btn-cancel-action" onclick="javascript:document.location='{{ base_url }}'" value="Cancel">Cancel</button> </div> </div> </div>

      Please see http://dev4.softreactor.com/register on different devices. Seems to be OK. I left curbs for clarity. And just the yellow border I registered for col-sm-4 and the yellow border is visible only on the iphone-ah.

      There are some more editors on this site - I looked, everything seems fine ...