Bootstrap news slider

Navigation
1

Well, I have a problem with a slider.

I have a slider with 3 news boxes and I want to run from 3 in 3 boxes, so far so good, it is already working, but the problem is when I move the device to the mobile device and changed it to block but instead of me increase the bottom box is above all the content down

                             

NEWS 


     <div class="carousel slide" id="noticias">
            <div class="carousel-inner conteudo">
              <div class="item active" id="noticias">





                <div class="col-md-4">
                    <div class="service-item">
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_01.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>              
                <div class="col-md-4" >
                    <div class="service-item">                                                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_02.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>                  
                <div class="col-md-4">
                    <div class="service-item">                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_03.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>








        </div>




        <div class="item">
                <div class="col-md-4">
                    <div class="service-item">
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_01.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>              
                <div class="col-md-4" >
                    <div class="service-item">                                                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_02.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>                  
                <div class="col-md-4">
                    <div class="service-item">                      
                        <div class="service-desc">
                            <h3>Lorem ipsum</h3>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
                            <p><img src="img/news/teste_03.jpg" class="img-responsive"/></p>
                        </div>
                    </div>
                </div>

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


<div class="control-box">                            
        <a data-slide="prev" href="#noticias" class="carousel-controla left">‹</a>
        <a data-slide="next" href="#noticias" class="carousel-controla right">›</a>
    </div><!-- /.control-box -->
            </div>
        </div>
    </section>

Thegoalwastohavesomethinglikethis:

    
asked by anonymous 14.05.2015 / 13:50

2 answers

1

Try using the .clearfix class in the slider, take a look at the documentation link

    
14.05.2015 / 19:40
3

The col-md-4 class is only applied if the screen is at least 970px wide.

To work on mobile devices add other classes according to the screen size as described in the documentation at: 

<div class="col-md-4" >

I suggest adding classes col-xs-4 or col-sm-4 .

    
14.05.2015 / 16:22
Problem with Struct in C inner join table on 1 = 1 can be considered a gambiarra?