2

Estou criando um sistema utilizando bootstrap, para deixar responsivo utilizei as classes col-xs-12 col-md-2, quando eu redimensiono a pagina a responsividade funciona perfeitamente, porém quando eu utilizo o modo mobile do Chrome o site fica do tamanho original.

inserir a descrição da imagem aqui

Como deveria ficar inserir a descrição da imagem aqui

HTML

@extends('layouts.app', ["current" => "clientes"])
<style>
    .img-card-user{
        width:220px;
        border-radius:50%;
    }
    .img-mini-card{
        width:50px;
    }
    .centered {
        margin: 0 auto !important;
        float: none !important;
    }
</style>
@section('body')
    <h2>Ultimo cliente cadastrado</h2>
    <p class="text-secondary">Esse foi o ultimo cliente cadastrado.</p>
    <div class="bs-callout bs-callout-primary">
        <div class="card-body">
            <div class="row">
                <div class="col-xs-12 col-md-3 centered">
                    <img alt="Responsive image" class="img-card-user mx-auto d-block"  src="/img/clientes/jademS.jpg">
                </div>
                <div class="col-xs-12 col-md-6 centered" style="padding-top:15px;">
                    <h4 class="text-primary">{{ $lastCliente->Nome }}</h4>
                    <small class="text-dark">Desenvolvedor back-end</small>
                    <div class="text-secondary" style="margin-top:15px;">
                        <ul style="list-style-type: none; padding-left:0px;">
                            <li><b>Idade: </b>{{ $lastCliente->Idade }}</li>
                            <li><b>Departamento:</b>@php $departamento = $departamentos->find($lastCliente->departamento_id) @endphp {{ $departamento->nome }}</li>
                            <li><b>Descriação:</b> {{ $lastCliente->descricao }}</li>
                        </ul>
                    </div>
                    <div class="row" style="font-size:24px; padding-left:15px;">
                        <i style="margin-right:10px;" class="fab fa-facebook-square"></i>
                        <i style="margin-right:10px;" class="fab fa-github"></i>
                        <i style="margin-right:10px;" class="fab fa-instagram"></i>
                    </div>
                </div>
                <div class="col-xs-12 col-md-2" style="padding-top:15px; font-size:20px;">
                    <span class="badge badge-primary full">Skills</span>
                    <span class="badge badge-secondary full">PHP 7 <i class="fab fa-php"></i></span>
                    <span class="badge badge-secondary full">Laravel 5.6 <i class="fab fa-laravel"></i></span>
                    <span class="badge badge-secondary full">Bitcoin <i class="fab fa-bitcoin"></i></span>
                </div>
            </div>
        </div>
    </div>
    <p class="text-right text-secondary"> Data de cadastro: {{ date('d/m/y', strtotime($lastCliente->created_at)) }} </p>
    <h2>Clientes</h2>
    <div class="card border">
        <div class="card-body">
            <ul class="list-group">
                @foreach($clientes as $cliente)
                <li class="list-group-item">
                    <img class="img-card-user img-mini-card" src="/img/clientes/mandela.jpg">
                    {{ $cliente->Nome }} <small class="text-secondary">@php $departamento = $departamentos->find($cliente->departamento_id) @endphp {{ $departamento->nome }}</small>
                    <a class="btn btn-primary float-right" href="/cliente/destroy/{{ $cliente->id }}" style="margin-top:10px;">Excluir</a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
@endSection
6
  • Todos os lugares onde tiver col-xs-12, vc deve colocar apenas col-12, aparentemente vc está usando o BS4, mas as classes do grid do BS3, testa e me fala o que deu ai, pq com esse seu código não da para testar aqui, ou então coloca pra gente o HTML direto copiado do Browser, da um CtrlU na janela e copia o HTML de lá ja renderizado!
    – hugocsl
    14/03/2019 às 18:39
  • alterei mas ficou do mesmo jeito 14/03/2019 às 18:47
  • coloquei o html todo aqui notepad.pw/boostratpnotwork 14/03/2019 às 18:48
  • Aqui ficou perfeito... deve ser algo a mais que vc colocou ai.......... prntscr.com/mxy9a4 Na verdade parece que o layout só quebra em uma determinada medida... vou ver prntscr.com/mxya4k
    – hugocsl
    14/03/2019 às 18:55
  • estranho sera que pode ser alguma conf da minha maquina ? 14/03/2019 às 19:00

2 Respostas 2

3

Seu código tem dois problemas, o principal é que vc não está usando a meta tag viewport, sem ela sua página não fica responsiva da forma correta. Adicione dentro do seu <head> a tag abaixo

<meta name="viewport" content="width=device-width, initial-scale=1">

Recomendo que leia aqui sobre a tag viewport: Como declarar e usar a regra @viewport?

O outro problema é que vc montou um grid com 11 colunas dentro do body-card, com isso o texto fica encavalado, estava 3-6-2 = 11. mudei para 4-6-2 = 12 e o texto não fica mais encavalado.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

.container{
        margin-top:80px;
        margin-bottom:80px;
    }    
    .img-card-user{
    width:220px;
    border-radius:50%;
}
.img-mini-card{
    width:50px;
}
.centered {
    margin: 0 auto !important;
    float: none !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Sistema de gerenciamento</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
      </li>
      <li class="nav-item active dropdown">
        <a class="nav-link dropdown-toggle" id="linkClientes" role="button" data-toggle="dropdown" href="#">Clientes</a>
        <div class="dropdown-menu" aria-labelledby="linkClientes">
          <a class="dropdown-item" href="/clientes">Lista de clientes</a>
          <a class="dropdown-item" href="/cliente/novo">Cadastro</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="linkClientes" role="button" data-toggle="dropdown" href="#">Departamentos</a>
        <div class="dropdown-menu" aria-labelledby="linkClientes">
          <a class="dropdown-item" href="/departamentos">Lista de departamentos</a>
          <a class="dropdown-item" href="/departamento/novo">Cadastro</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/about">about</a>
      </li>
    </ul>
    <span class="navbar-text">
      IBico solutions
    </span>
  </div>
</nav>
<div class="container">
  <main role="main">
    <h2>Ultimo cliente cadastrado</h2>
    <p class="text-secondary">Esse foi o ultimo cliente cadastrado.</p>
    <div class="bs-callout bs-callout-primary">
      <div class="card-body">
        <div class="row">
          <div class="col-12 col-md-4 centered">
            <img alt="Responsive image" class="img-card-user mx-auto d-block" src="https://placecage.com/100/100">
          </div>
          <div class="col-12 col-md-6 centered" style="padding-top:15px;">
            <h4 class="text-primary">Marcos</h4>
            <small class="text-dark">Desenvolvedor back-end</small>
            <div class="text-secondary" style="margin-top:15px;">
              <ul style="list-style-type: none; padding-left:0px;">
                <li><b>Idade: </b>33</li>
                <li><b>Departamento:</b> Finanças</li>
                <li><b>Descriação:</b> Give me money</li>
              </ul>
            </div>
            <div class="row" style="font-size:24px; padding-left:15px;">
              <i style="margin-right:10px;" class="fab fa-facebook-square"></i>
              <i style="margin-right:10px;" class="fab fa-github"></i>
              <i style="margin-right:10px;" class="fab fa-instagram"></i>
            </div>
          </div>
          <div class="col-12 col-md-2" style="padding-top:15px; font-size:20px;">
            <span class="badge badge-primary full">Skills</span>
            <span class="badge badge-secondary full">PHP 7 <i class="fab fa-php"></i></span>
            <span class="badge badge-secondary full">Laravel 5.6 <i class="fab fa-laravel"></i></span>
            <span class="badge badge-secondary full">Bitcoin <i class="fab fa-bitcoin"></i></span>
          </div>
        </div>
      </div>
    </div>
    <p class="text-right text-secondary"> Data de cadastro: 14/03/19 </p>
    <h2>Clientes</h2>
    <div class="card border">
      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item">
            <img class="img-card-user img-mini-card" src="/img/clientes/mandela.jpg">
            Marcos <small class="text-secondary"> Finanças</small>
            <a class="btn btn-primary float-right" href="/cliente/destroy/9" style="margin-top:10px;">Excluir</a>
          </li>
          <li class="list-group-item">
            <img class="img-card-user img-mini-card" src="/img/clientes/mandela.jpg">
            Bruno <small class="text-secondary"> Segurança da informação</small>
            <a class="btn btn-primary float-right" href="/cliente/destroy/8" style="margin-top:10px;">Excluir</a>
          </li>
          <li class="list-group-item">
            <img class="img-card-user img-mini-card" src="/img/clientes/mandela.jpg">
            Evandro <small class="text-secondary"> Desenvolvimento</small>
            <a class="btn btn-primary float-right" href="/cliente/destroy/7" style="margin-top:10px;">Excluir</a>
          </li>
        </ul>
      </div>
    </div>

  </main>
</div>

2
  • fiz as alterações que você recomendou e funcionou perfeitamente obrigado 14/03/2019 às 19:19
  • @EvandroIgnacio legal que deu certo ai, sucesso com o projeto. []´s
    – hugocsl
    14/03/2019 às 19:20
-2

Só complementado que não seria necessário a classe css col-12 nestas três linhas:

div class="col-12 col-md-4 centered">
div class="col-12 col-md-6 centered" style="padding-top:15px;">
div class="col-12 col-md-2" style="padding-top:15px; font-size:20px;">

Uma vez que foi usado a classe css container e não foi definido uma largura para os itens, eles vão se empilhar se o portview for menor que medium.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .