屏幕太小时，bootstrap dropdown-menu-right

Question

I have a dropdown menu and using

class = dropdown-menu

the dropdown menu uses extra space on the right site. If I make the screen smaller (or use a mobile device) there might not be any space on the right site. In this case I can use

class = dropdown-menu-right

which uses the space on the left site instead. My question is, is there a way to detect the size of the screen and based on that render a html template with one of the two options above? thanks carl

Answer 1

Solution using media Query only css

Note: Run code in full screen and try to reduce screen

 @media (min-width: 768px) { .one { width: 30px; height: 30px; background-color: red } } @media (max-width: 768px) { .two { width: 30px; height: 30px; background-color: yellow } } 

 <div class="one two "></div> 

see this answer : https://stackoverflow.com/a/33209805/4696809 in this answer run snippet in full screen you can see menu if you reduce window size menu will gone and button will appear even i am changing center part also depending upon window size

Using Jquery

Note: Run code in full screen and try to reduce screen and see console and div.if you reduce screen width div color will change.

 $(document).ready(function() { $(window).resize(function() { var width = $(window).width() console.log($(window).width()) if (width > 786) { console.log("BIg") $('.first').removeClass('new') } else if (width < 786) { console.log("small") $('.first').addClass('new') } }); }); 

 .first { width: 30px; height: 30px; background-color: red; } .new{ background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first"></div>