Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como criar um container com tamanho fixo?

Referente ao curso Bootstrap: criação de uma single-page responsiva

por João Pedro
| 77.2k xp | 96 posts

Como faço para criar um container com tamanho fixo? Preciso fazer uma sidebar que irá conter um datapicker de tamanho fixo, então eu precisava que o container do side bar, tivesse o tamanho do datapicker. Como eu poderia fazer isto? Segue abaixo o que eu tentei:

  <div class="container-fluid">
      <div class="row">
        <div class="col-md-3 sidebar cor-fundo">
          <ul class="nav nav-sidebar">
              <div aling="center" id="calendario"></div>
              <li><p>Bem Vindo!</p></li>
            <li><a href="#">Mais informações<span class="sr-only">(current)</span></a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Sair</a></li>
          </ul>
        </div>
        <div class="col-md-9" id="principal">
            <h1>Minha Agenda</h1>
        </div>
       </div>
    </div>
4 respostas
por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Oi Joao, tudo certo?

Bastaria você colocar uma regra que sobrescreva a regra da largura do container do Bootstrap. Algo como:

.container-fluid {
  width: sua-largura
}

Não esqueça que essa regra precisa ser aplicada depois do browser carregar o Bootstrap. Cuidado na ordem de chamada dos CSSs então.

Espero ter ajudado,

Abcs!

edit:

essa abordagem resolve, mas pode quebrar o resto do site, melhor criar uma classe "container-do-joao", e aí nela sim colocar a largura.

por João Pedro
| 77.2k xp | 96 posts

Olá Natan tudo bem? Me tire uma dúvida, quando eu crio esta regra .container-fluid anulo as outras regras do bootstrap referente ao container? Eu fiz desta forma:

<div class="container-fluid">
      <div class="row">
        <div class="custom-sidebar cor-fundo col-md-3">
            <div class="row">
                <div class="container">
                    <div id="calendario"></div>
                </div>    
            </div>
            <div class="row">
                <div class="container">
                    <ul class="nav nav-sidebar">
                          <div aling="center" id="calendario"></div>
                          <li><p>Bem Vindo !</p></li>
                        <li><a href="#">Mais Informações<span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Analytics</a></li>
                        <li><a href="#">Sair</a></li>
                    </ul>
                </div>
            </div>
        </div>

CSS

.custom-sidebar
{
    width:278px !important;
}

Está certo fazer desta forma? Desde já obrigado

por Natan Souza
| 2101.7k xp | 3699 posts
Instrutor Product Design Lead

Oi Joao,

Sim, dependendo da ordem que voce chama os CSSs, vai sobrescrever sim.

Para evitar isso e estragar o resto do site que voce precisa dessa sua classe criada.

Entao a ordem de chamada dos CSSs que é importante aqui, primeiro o Bootstrap, depois o seu.

Abcs!

solução!
por Yuri Padilha
| 152.5k xp | 226 posts
Instrutor Desenvolvedor e Instrutor

Oi João Pedro, td bem?

Então, o problema de vc criar uma regra por exemplo:

.container-fluid {
    width: 278px !important;
}

É que isso vai afetar todos os lugars que vc usa a classe .container-fluid. Não é legal vc alterar as propriedades de classes do próprio bootstrap porque eventualmente vc acaba usando elas em vários lugares eai pode acontecer de bugar tudo.

O melhor a fazer foi realmente fez mesmo, criar uma classe nova para aplicar os novos estilos e deixar as classes do bootstrap quietas, hehe (:

Espero ter ajudado, abraço!!