Procure usar o sistema de grid do bootstrap veja aqui, usando ela você não precisa se preocupar com largura nem altura dos componentes que está usando, sem contar que o seu site fique responsivo.
Caso você utilize o sistema de grid, evite quebrar a lógica da biblioteca, causando overflow de tamanho do item através de inserção do seletor width ou height.
Caso não saiba ou não queira usar o sistema de grid, aconselho você a usar os seletores de altura e largura, sempre como percentual.
Exemplo: width:200%
Estava recentemente aprendendo a trabalhar com o grid do bootstrap e talvez seja uma boa mostra aqui.
Esse código está em EcmaScript pois estava desenvolvendo junto com ReactJS, mas ignore esse detalhe para não complicar.
<header style={cssHeader}>
<Grid fluid={true} style={cssGrid}>
<Row style={cssRow}>
<Col lg={2} md={4} xs={12} style={cssCol}>
<h1 > Logo </h1>
</Col>
<Col lg={6} md={8} xs={6} style={cssCol}>
<h1 > Soluções Inteligentes </h1>
</Col>
<Col lg={4} md={12} xs={6} style={cssCol}>
<h1 > XXX</h1>
</Col>
</Row>
</Grid>
</header>
Perceba que é possível manipular todos os elementos dentro do grid, além de ser possível criar infinitos grids.
Nesse meu exemplo, eu testei diferentes tamanhos dos elementos de acordo com a tela do usuário, então ele mostra os componentes logo
, Soluções Inteligentes
e xxx
de diferentes formas conforme o tamanho dispositivo que o usuário está acessando, nesse caso o computador, tablet ou celular, nessa ordem.
.col-md-1
?