Adjust horizontal and vertical orientation in Bootstrap

Question

Adjust horizontal and vertical orientation in Bootstrap

Navigation

#1 by (3 votes)
#2 by (-2 votes)

2

My page is horizontal the way I want it:

But if you leave the phone upright it's going like this:

How do you make it vertical in the following way?

Follow my code:

   <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnHome.png" />
            </a>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnProduto.png" />
            </a>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
            <a href="#">
                <img src="~/Content/Images/btnContato.png" />
            </a>
        </div>
    </div>

css twitter-bootstrap mobile

asked by anonymous 08.09.2014 / 18:02

2 answers

Use Identity in an Asp.Net MVC 5 application with Web Api and vice versa How to make a script run only once?

score 3 · Answer 1

You do not need to crank in css, just remove the col-xs-4 class that refers to "Extra Small Devices", so the divs are in rows and not in columns on devices that are smaller than 768px. Here goes the edited code:

   <div class="row">
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnHome.png" />
        </a>
    </div>
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnProduto.png" />
        </a>
    </div>
    <div class="col-sm-4 col-md-4">
        <a href="#">
            <img src="~/Content/Images/btnContato.png" />
        </a>
    </div>
</div>

score -2 · Answer 2

-2

Put float:left in the last two divs .

08.09.2014 / 19:02