Jump to content
Sign in to follow this  
gust.php

Bootstrap e diferentes resoluções

Recommended Posts

Prezados, bom dia.

 

Estou tendo dificuldades para criar uma interface usando o Bootstrap. Tenho uma listagem com o seguinte código:

 


<div class="row">

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

         <table class="table table-responsive table-hover">

     

        </table>

     </div>

</div>

 

Minha dúvida é a seguinte:

No meu monitor essa tabela fica certinha, com tamanho de fontes legais, toda a linha ocupando a parte central da tela. Em outros monitores de mesmo tamanho mas com resolução diferente, essa mesma linha fica horrível, as fontes ficam grandes, a última coluna, onde tenho 3 botões, os botões ficam um em baixo do outro, sendo que os mesmos deveriam ficar um ao lado do outro, como ficam no meu monitor.

 

Como trabalhar com resoluções diferentes usando o bootstrap, fazer com que meu design seja realmente responsivo?

 

Agradeço ajudas ....

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By asacap1000
      Salve galera.
      Tenho uma página com vários box deste abaixo com a descrição de uma TV que temos na empresa onde mostram os status de diversos processos.
      Ainda não coloquei o link para o direcionamento porém antes da pessoa clicar eu gostaria que quando posicionasse o mouse em cima do botão aparecesse uma miniatura do site destino.
      é Possivel isso?? eu tentei o mouseover mas não carregou, 
       
                  <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-blue-gradient" style="border-radius: 05px 05px;">
                      <div class="inner">
                        <h3 align="center"><?=$qtd_veiculos?></h3>
                        <p align="center">VEÍCULOS EM TRÂNSITO</p>
                      </div>
                    </div>
                  </div>
       
    • By leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    • By jvb
      Olá povo do código, eu confesso que estou sem saber o pq de algumas propriedades do Bootstrap 4.2.1 como por exemplo:
      .img-fluid { max-width:100%; height: auto } não funcionar em outra folha de style, que não seja Bootstrap, a propriedade não esta dentro de @media, essa propriedade eu imaginava ser de uso geral.
      Vejamos que a Página continua linkando para o bootstrap, apenas algumas propriedades não terem efeito em outra folha de styles. 
    • By AlexandrePrezzi
      Pessoal, estou com um problema em um menu (nav) que possui 2 níveis
      Peguei esse código "pronto" porém está com algo que não consigo entender
       
      O link do segundo nível quando clica não redireciona para a página desejada ,  porém se eu clicar e pedir para abrir em nova guia dai ele funciona..
       
      Vou colocar o código aqui (tentei deixar o mais simples possível,  com apenas os itens a serem testados)
       
      Fico no aguardo
      <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function () { $('.navbar .dropdown-item').on('click', function (e) { var $el = $(this).children('.dropdown-toggle'); var $parent = $el.offsetParent(".dropdown-menu"); $(this).parent("li").toggleClass('open'); if (!$parent.parent().hasClass('navbar-nav')) { if ($parent.hasClass('show')) { $parent.removeClass('show'); $el.next().removeClass('show'); $el.next().css({"top": -999, "left": -999}); } else { $parent.parent().find('.show').removeClass('show'); $parent.addClass('show'); $el.next().addClass('show'); $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4}); } e.preventDefault(); e.stopPropagation(); } }); $('.navbar .dropdown').on('hidden.bs.dropdown', function () { $(this).find('li.dropdown').removeClass('show open'); $(this).find('ul.dropdown-menu').removeClass('show open'); }); }); </script> <style> .navbar .dropdown-toggle, .navbar .dropdown-menu a { cursor: pointer; } .navbar .dropdown-item.active, .navbar .dropdown-item:active { color: inherit; text-decoration: none; background-color: inherit; } .navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: #16181b; text-decoration: none; background-color: #f8f9fa; } @media (min-width: 767px) { .navbar .dropdown-toggle:not(.nav-link)::after { display: inline-block; width: 0; height: 0; margin-left: .5em; vertical-align: 0; border-bottom: .3em solid transparent; border-top: .3em solid transparent; border-left: .3em solid; } } </style> </head> <body> <div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation"> <a class="navbar-brand" href="#">#####</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Testar</a> <ul class="dropdown-menu" aria-labelledby="dropdown1"> <li class="dropdown-item" ><a href="http://www.google.com">Google</a></li> <li class="dropdown-item dropdown"> <a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Submenu</a> <ul class="dropdown-menu" aria-labelledby="dropdown1-1"> <li class="dropdown-item"><a href="http://www.google.com">Google</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>  

    • By Sapinn
      Como mudar o cor da letra de um active em um menu no boostrtrap
       
      <nav class="navbar navbar-expand-lg navbar-light bg-light">         <div class="container">           <a class="navbar-brand" href="#">             <img src="icone.png" height="60px" alt="Logo">           </a>           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">             <span class="navbar-toggler-icon"></span>           </button>                  <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;">             <ul class="navbar-nav" >               <li class="nav-item active" >                 <a class="nav-link" href="#">Inicio</a>               </li>               <li class="nav-item" >                 <a class="nav-link" href="#">Login</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Aluno</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Professor</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Fale Conosco</a>               </li>             </ul>           </div>                </div>       </nav>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.