CODEWITHSUNDEEP
twitter-bootstrap
Giventoflyfish
Giventoflyfish

Reputation: 59

Twitter bootstrap and iPad

I've trying to learn to use Twitter bootstrap. It works well with the desktop and the responsive works. Let's say I'm using span8 and span4. I can't figure out how to force the iPad portrait view to stack the span4 under span8.

I have the correct tags in the head section, viewport and responsive CSS files.

Any ideas?

Updated:

Here is what I have. I can see how it be responsive when I shrink the webbrowser windows (eventually the span4 gets shifted under the span8). If I am in portrait mode on the iPad, don't want span8 and span4 to be stacked next to each other, instead I want span8 and then span4 to be stacked below span8.

in header

<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/bootstrap-responsive.css">

in body

<div class="container">
<div class="row">
<div class="span8">
<?php while ( have_posts() ) : the_post() ?>
<h4><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php    the_title( ); ?></a></h4>
<?php the_content(); ?>
<?php endwhile; ?>
</div>
<div class="span4">
hello this is a test to see if columns are fluid.
</div>
</div>
</div>

in footer

<script src="./js/bootstrap.js"></script>

Upvotes: 3

Views: 7138

Answers (1)

Shail
Shail

Reputation: 3649

Arrange in the following way : Jsfiddle with example

After the new explanation of question , Please use the following in your stylesheet or write your own media queries like below :

@media (min-width: 768px) and (max-width: 979px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
 }
}

In Header section bootstrap css (cloud hosted version)

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> /*bootstrap css with responsive css as well */

<link href="/css/style.css" rel="stylesheet"> /*your custom stylesheet*/

In body use following :

    <div class="row">
<div class="span4">Content</div>
<div class="span8">content</div>
</div>

In footer :

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

Upvotes: 3

Related Questions