Tengo el diseño con el código a continuación, donde cada elemento de la lista tiene un título "Elemento 0", debajo hay una pequeña etiqueta con el texto "Descripción Elemento 0" y luego dos menús seleccionados a la derecha. Quiero el diseño tal como está, el único problema es que quiero la pequeña etiqueta "Descripción Elemento 0" debajo del título "Elemento 0" pero no funciona. Con un <br> no funciona porque el título y el pequeño son elementos span diferentes. ¿Sabes cómo poner la pequeña etiqueta debajo del título "Elemento 0" y alinear verticalmente los elementos?

Ejemplo: https://jsfiddle.net/uxvh0gmj/1/

Html:

<div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span class="title">Item 0</span>
              <br>
              <span><small>Description Item 0</small></span>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>

Css:

.title{
  color:gray;
  font-weight:bold;
}
0
user9165955 18 ene. 2018 a las 00:35

3 respuestas

La mejor respuesta

Simplemente envuélvalos en el mismo div y mantenga el br para crear el salto de línea:

.title {
  color: gray;
  font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div>
                <span class="title">Item 0</span>
                <br>
                <small>Description Item 0</small>
              </div>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>
1
Temani Afif 17 ene. 2018 a las 21:40

NOTA: no eliminé ni agregué nada, simplemente cambié sus lugares

Si inserta el tramo dentro del otro tramo, irá junto a él, pero si agrega un <br> entre ellos, lo colocará debajo.

Aquí está el código editado:

 <div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span class="title">Item 0<br><span>Description Item 0</span></span>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>

Los cambios que hice fue:

<span class="title">Item 0<br><span>Description Item 0</span></span>

Puede agregar este código CSS para evitar que la descripción se vea como el título

.description {
    color: black;
    font-weight: normal;
}

Y luego solo agrega class="description" al segundo lapso.

1
iStudLion 17 ene. 2018 a las 21:50

Solo envuélvelos en la misma div o la misma span

.title {
  color: gray;
  font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<div class="container py-5">
  <div class="row no-gutters">
    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header">
          <h5 class="text-heading-blue mb-0 font-weight-semi-bold">Title</h5>
        </div>
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <span>
                <span class="title">Item 0</span>
                <br>
                <small>Description Item 0</small>
              </span>
              <form>
                <select class="custom-select form-control" style="width:100px;">
                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
              <form>
                <select class="custom-select form-control" style="width:100px;">                  <option selected="">0</option>
                  <option>1</option>
                  <option>2</option>
                </select>
              </form>
            </li>

          </ul>
        </div>
        <div class="card-footer">
          <button type="button" class="float-right btn">Next</button>
        </div>
      </div>
    </div>
0
A. Bechir 17 ene. 2018 a las 21:47