Home / Questions

Questions[css]

Martin Hope
carlos lopez
Asked: 2020-03-29 11:36:03 +0800 CST
  • 20

I was using a version 3 of Bootstrap. Now that I updated to version 4 I have the following problem:

enter image description here

It worked for me with Bootstrap 3 ( see full page ):

.titulo {
  height: 200px;
  background: #666;
  border: 1px solid #333;
}

.dato {
  height: 100px;
  background: #666;
  border: 1px solid #333;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>

  <div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>

And the same code stopped working for me with Bootstrap 4:

.titulo {
  height: 200px;
  background: #666;
  border: 1px solid #333;
}

.dato {
  height: 100px;
  background: #666;
  border: 1px solid #333;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="titulo col-lg-3 col-md-4 col-sm-4">Titulo</div>

  <div class="dato col-lg-3 col-md-4 col-sm-4">1</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">2</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">3</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">4</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">5</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">6</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">7</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">8</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">9</div>
  <div class="dato col-lg-3 col-md-4 col-sm-4">10</div>
</div>

Question: How can I make the div .titulotake up 2 rows, and the divs .datowrap responsively, using the remaining space, according to whether it's a device smor lg? The divs have a fixed height (the title is 2 times the height of the rest).

It is worth clarifying that I build the small boxes dynamically with an ngForangular, therefore dividing them into containers in a fixed way is not an option. The code I have to generate them is:

<div class="dato col-lg-3 col-md-4 col-sm-6" 
*ngFor="let dato of datos">
    {{dato.nombre}}
</div>
css
Martin Hope
fedorqui
Asked: 2020-07-21 02:46:02 +0800 CST
  • 34

I've read the documentation for calc()and understand the syntax, but being in CSS, where no code is executed, I can't figure out when it should be used.

The paradigmatic example sounds quite simple to me and I don't know if it is very useful:

/* property: calc(expression) */
width: calc(100% - 80px);

Are there canonical cases for the use of calc()? Could you name an example in which its use is practical for a solution of a real case?

I see that its use is quite widespread across browsers (93% according to Can I use... ). How recommended is it to use it, and what would be its equivalent for browsers that don't support it (IE 8 and earlier, with some issues with IE 9)?

css
Martin Hope
Alvaro Montoro
Asked: 2020-07-27 20:42:50 +0800 CST
  • 24

In CSS we can define styles for id's with the hash ( #) and for classes with the dot ( .), but there are some rules that are preceded by the at sign ( @) such as:

@font-face {
    /* definición de fuente propia */
}

@media print {
    /* estilos a la hora de imprimir */
}

@keyframes miAnimacion {
    /* definición de pasos para una animación */
}

What does the @before period mean? How many are there and what are they used for? What's so special about them?

css