html - CSS: Adjust alignment of inline items on wrap -


i have 2 items represent checkboxes displayed inline-block. on wide screen should displayed in 1 line next each other. both should centered.

good:   |-----itemx--itemxyz-----| 

on smaller screens want them displayed on top of each other, still centered on screen aligned left:

good:  |--itemx----| |--itemxyz--| 

what able @ moment just:

bad:  |---itemx---| |--itemxyz--| 

how achieve css(3)?

ps: i'm using bootstrap 3, maybe helpful...

html:

<div id="form">     <div class="cb"></div>     <div class="cb"></div> </div> 

css far:

#form {     display: block;     text-align: center;      @media , (max-width: 480px) {         //     } }  .cb {     display: inline-block; } 

you can use media queries task.

        .checkbox{              display: inline-block;          }          @media , (max-width: 480px) {              .checkbox{                  display: block;              }          }
    <div class="container text-center">          <div class="checkbox text-center">              <label>                  <input type="checkbox"> checkbox 1              </label>          </div>          <div class="checkbox text-center">              <label>                  <input type="checkbox"> checkbox 2              </label>          </div>      </div>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -