0

alguien me ayude a que cada párrafo ocupe dependiendo su tamaño y no se adapte al tamaño de los otros ? Quiero que los parrafos pequeños ocupen su tamaño y no bajen hasta el tamaño del mas grande.

introducir la descripción de la imagen aquí

Aqui el codigo :

<!DOCTYPE html>
<html>
<head>
    <title>Proyecto</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="x-ua-compatible" content="ie-edge">

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

</head>



<body>

<div class="container">






<div class="row">
<div class="col-xl-4 col-md-4 col-xs-12" style="background-color: red">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.

</div>

<div class="col-xl-4 col-md-4 col-xs-12" style="background-color: yellow">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.

</div>


<div class="col-xl-4 col-md-4 col-xs-12" style="background-color: olive">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.

</div>


</div>






</div>











<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.js"></script>
</body>
</html>
3
  • Exactamente que quieres configurar, no me queda muy claro lo que realmente quieres que haga el codigo. Commented el 22 sept. 2018 a las 14:33
  • Quiero que los parrafos pequeños ocupen su tamaño y no bajen hasta el tamaño del mas grande.
    – Javier
    Commented el 22 sept. 2018 a las 14:34
  • Puedes intentar sacarlo del <div class="row"> Commented el 22 sept. 2018 a las 15:29

1 respuesta 1

2

Sácalos del div class="row"

.amarillo{
background-color: yellow;
}

.rojo{
 background-color: red;
}

.verde{
  background-color: green;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-3 col-sm-3 col-xs-3 amarillo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 rojo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.
  </div>
  
  <div class="col-md-3 col-sm-3 col-xs-3 verde">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla alias hic, maxime fugiat eligendi. Nostrum, corrupti, fugit. Sed minus voluptates incidunt itaque quia error delectus doloribus laudantium neque natus.
  </div>
</div>

2
  • mejor imposible..! estaba montandole el ejemplo en (codepen.io/anon/pen/QVPEMr) pero aqui quedo de lujo. Commented el 22 sept. 2018 a las 15:32
  • 1
    Si te sirvió recuerda marcar como correcta con la palomita :) Commented el 22 sept. 2018 a las 15:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.