2

Here is my question. I've been messing with this for a couple of days now and haven't been able to find a fix other than a website that does what I'd like and I can't seem to replicate it. That website is here . The calendar when you move down to a mobile size application maintains the form of the original calendar, i.e doesn't start stacking days. Here is the code that I have.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>"Stars"</title>
    <meta name="viewport" content="width-device-width, intial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content ="">
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="dist/js/bootstrap.min.js"></script>
</head>     
<body>
<div class ="container">
    <div class="row">   
        <div class = "span6">
            <center>
            <div class = "jumbotron">
            <div class = "row-xs-1">
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            </div>

            <div class = "row-xs-1">
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            <button type="button" class=" btn btn-xs btn-default">Open</button>
            </div>

        </div>
    </center>
    </div>
</div>

</body>

</html>

If you run this code you will see everything looks to be fine, but the content doesn't maintain the same rows at the mobile level or possibly even the tablet level. Any help is very much appreciated. I've been trying to figure out how to do this for a few days, as I'm not into wasting anyone's time.

Kind Regards,

B

Edit:

Ok let me add a couple of screenshots to help clarify things here. I have this which is a 10x10 grid of buttons. (Slightly modified code from above...I removed a bunch of the bloated code as to save everyone the headache.enter image description here If I move down to viewing size of a mobile this happens: enter image description here

What I need to have is when entering the mobile context, the buttons remain in 10x1 rows and the original 10x1 doesn't get hacked into a stacked 5x2 on the mobile and table viewing areas.

Mike Causer
  • 8,196
  • 2
  • 43
  • 63
user1572597
  • 373
  • 3
  • 15
  • You can email me with your [need](http://stackoverflow.com/questions/21792812/nokogiri-ruby-html-parser). My email id mentioned [here](http://stackoverflow.com/users/2767755/arup-rakshit). – Arup Rakshit Feb 15 '14 at 04:13

1 Answers1

0

Try defining buttons inside div with span as you require to see in every view be it mobile view or desktop, have a look at this example http://getbootstrap.com/css/#grid-example-basic in bootstrap document.

Adarsh Nair
  • 370
  • 2
  • 4
  • 17
  • Or you can define the span class to this buttons to keep them in row. – Adarsh Nair Dec 27 '13 at 03:13
  • Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row. This is exactly what I don't want it to do...I need the buttons to remain in a horizontal row from mobile all the way to desktop. Thanks for the post though. Small buttons, lined horizontally that change size dynamically from mobile to desktop is what I'm looking for. – user1572597 Dec 27 '13 at 03:17
  • I still didn't get your problem but what I did understand on base of that I would suggest you to use two divs one with visiblity only to small and extra small devices and another visible on large devices using responsive utilities http://getbootstrap.com/css/#responsive-utilities – Adarsh Nair Dec 27 '13 at 03:27
  • If you take a look at that website I listed in the opening paragraph of the question, it has the downloadable calendar widget for free. The index file after unzipped will bring up the calendar. If you look it will be viewable on a desktop browser and can be shrunk all the way to a mobile yet everything remains the same yet scaled. For me the buttons will remain in rows of 10 until I get to a certain size and then moe to 9+1, 8+2,...all the way until two rows of 5 representing what should be a row of 10. I have played with everything I can think . I know it can happen b/c of that calendar. – user1572597 Dec 27 '13 at 03:36
  • Look at the solution and try this as I don't have my laptop with me. http://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap – Adarsh Nair Dec 27 '13 at 03:41
  • 1
    Hopefully the edit with screenshots will help clarify...I need the 10x1 to stay in tact on a mobile and not turn into a stacked 5x2 for each 10x1 column. – user1572597 Dec 27 '13 at 04:05
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43963/discussion-between-adarsh-nair-and-user1572597) – Adarsh Nair Dec 27 '13 at 04:52