html - Bootstrap - Row of icons to flow to second line (make responsive) -


i'm using bootstrap 4, , trying create (responsive) row of 12 icons.

<div class="app-container"> <div class="row">    <div class="col-md-1">     <a class="" href="https://www.xxx.org.au">       <img class="" src="/images/web-1.png" alt="">     </a>   </div>   ... x 12  </div> </div>

and class "app-container" has 1 style property:

.app-container {   width:1050px; }

on wide display icons stay in single row.

but window decreases in width, i'd icons start falling second row (starting icons on right end) 1 @ time.

at present stay how things behind reduce in width. (they overflow outside container in. not being fluid/responsive).

see below:

enter image description here

easiest solution use classes built bootstrap 4.

http://www.codeply.com/go/mvnos3gpcc

<div class="app-container">     <div class="row">         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>         <div class="col-1">             <a class="" href="https://www.xxx.org.au">                 <img class="" src="//placehold.it/60" alt="">             </a>         </div>     </div> </div>

demo

just set min-width on each col-1. don't use col-md-1 beause they'll stack @ 992px instead of "one @ time".


Comments

Post a Comment

Popular posts from this blog

'hasOwnProperty' in javascript -

i use obj.hasownproperty judge whether object has property, when replaced obj[prop] !== undefined , not normal implementation, ask, why behind method can not use it? object.hasownproperty(prop); object[prop] !== undefined; obj[prop] !== undefined wrong 2 reasons: you can explicitly set property undefined , obj[prop] = undefined; . obj.hasownproperty(prop) return true in case. obj[prop] follow prototype chain, return property that's inherited. obj.hasownproperty(prop) returns true if property exists directly in object, returns false inherited properties.
Read more

How to understand 2 main() functions after using uftrace to profile the C++ program? -

i trying uftrace profile following simple c++ program: #include <iostream> class { public: a() {std::cout << "a created" << std::endl;} ~a() {std::cout << "a destroyed" << std::endl;} }; int main() { a; return 0; } the profile result this: # uftrace a.out created destroyed # duration tid function 2.026 [ 4828] | __cxa_atexit(); [ 4828] | main() { [ 4828] | __static_initialization_and_destruction_0() { 89.397 [ 4828] | std::ios_base::init::init(); 0.768 [ 4828] | __cxa_atexit(); 93.029 [ 4828] | } /* __static_initialization_and_destruction_0 */ 94.425 [ 4828] | } /* main */ [ 4828] | main() { [ 4828] | a::a() { 11.104 [ 4828] | std::operator <<(); 10.825 [ 4828] | std::basic_ostream::operator <<(); 24.514 [ 4828] | } /* a::a */ [ 4828] | a::~a() { 0.978 [ 4828] | ...
Read more

android - Unable to generate FCM token from dynamically instantiated Firebase -

our business logic requires instantiate firebase during runtime. fetch firebase credentials (app id, api key etc.) default firebase location after knowing user's public key , create firebase instance using credentials. this means there 2 firebase instances used within app: the default "index" firebase gives credentials second the actual firebase intend use point forward the second firebase initialised this: firebaseapp app = firebaseapp.initializeapp(<context>, <options>, <app_label>); our problem traditional method of retrieving fcm token using firebaseinstanceidservice , ontokenrefresh() fails since ontokenrefresh() method called first firebase instance. directly calling string token = firebaseinstanceid.getinstance(app).gettoken(); returns null never ready when called. have tried polling test if token generated @ point. no luck. how can generate fcm token reliably firebase instance instantiated during runtime? i...
Read more