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
Post a Comment