Link to home
Create AccountLog in
Avatar of Eduardo Fuerte
Eduardo FuerteFlag for Brazil

asked on

Could you point how to adapt this PHP/ Bootstrap code to correctly format the desired layout?

Hi Experts


Could you point how to adapt this PHP/ Bootstrap code to correctly format the desired layout?

Accordingly with this code:

@extends('layouts.appinterno')

@section('content')

	<div class='row'>

	{{ csrf_field() }}

  	  	<!--div class="col-xs-12 col-sm-4 col-md-4"-->
        <div class="col-md-10 col-sm-12">
		    <p class="titResumoNoticia">Arquivo de Fotos</p>
		   
     
            @foreach($vitrinesX as $vitrine)

                <section class="row">

                               
                        <div class="col-sm-12 col-md-4">
                            <div class="box-noticias">
                               	<a href="javascript:void(0);" onclick='xxx.vitrine.abrirNoticia({{$vitrine->id}});' >
        	    				{{$vitrine->titulo}}
        	    			    </a>                    
                            </div>
                            
                            	<p id="like" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id }}, 1)">
				                    <i class="fa fa-thumbs-up"></i> <span id="qtdeCurtiu_{{ $vitrine->id }}">{{ $qtdeCurtiu }}</span>
				               	</p>   
                                    
           						<p id="dislike" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id }}, 0)">
				                    <i class="fa fa-thumbs-down"></i> <span id="qtdeNaoCurtiu_{{ $vitrine->id }}">{{ $qtdeNaoCurtiu }}</span>
						       </p>       
                        </div>           
              
                       
                        @if($loop->last)
                            @break
                        @else
                            @continue 
                        @endif      
                              

                </section>
            
  
            @endforeach
			</div>

	</div>
@endsection

Open in new window


This layout is presented:

User generated image

The needed layout is:

User generated image
Is it a case of using of Laravel's chunck ?


Thanks in advance!
Avatar of lenamtl
lenamtl
Flag of Canada image

Hi,

try to change this on line 10
 <div class="col-md-10 col-sm-12">

Open in new window

to this
 <div class="col-md-12 col-sm-12">

Open in new window


Bootstrap total column per row must equal 12 per type md-12, sm-12 etc.
Avatar of Eduardo Fuerte

ASKER

Hi


After changing the problem remains.

I guess it's related with the foreach after filling every row...
Note that usually section does not have the row class so this seems no good <section class="row">
<section >
  <div class="container">
          <div class="row">
                 <div class="col-sm-12">
                   </div>
            </div>
    </div>
</section >

Open in new window


sometimes just moving the foreach at different place can fix the problem, try to move @foreach($vitrinesX as $vitrine) between the section and the row


You can try to make the template with fixed hardcoded items and see if the result is ok.
That's may depend of the image size, too and other custom CSS.
Then if it's work ok change the fixed code to dynamic code

You can use their example
https://getbootstrap.com/docs/4.0/examples/album/
view-source:https://getbootstrap.com/docs/4.0/examples/album/
The solution by using Laravel is to use chunck:

This solved:

<section class="row">

		@foreach($vitrinesX->chunk(3) as $row)
		
			@foreach($row as $vitrine)
		  
			   <div class="col-sm-12 col-md-4">
				
				
				<div class="box-noticias">
					<a href="javascript:void(0);" onclick='xxx.vitrine.abrirVitrine({{$vitrine->id}});' >
					{{$vitrine->titulo}}
					</a>                    
				</div> 
				
				<p id="like" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id }}, 1)">
					<i class="fa fa-thumbs-up"></i> <span id="qtdeCurtiu_{{ $vitrine->id }}">{{ $vitrine->qtdeCurtiu }}</span>
				</p> 
					
   
			</div>     
			  
			@endforeach
			
		@endforeach
		  
								  
</section>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Eduardo Fuerte
Eduardo Fuerte
Flag of Brazil image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account