2

Hola tengo una sección donde a la izquierda hay una imagen y en la parte derecha es texto. Al añadir mucho texto en la parte derecha, debajo de la imagen queda mucho hueco en blanco hasta la siguiente sección, como muestro en la captura, el circulo y la X negra. ¿ Habría forma de poner otra imagen debajo de la primera o texto para rellenar el hueco que queda? Si la añado el código de la imagen, debajo de la otra, mueve todo hacia abajo. Si lo coloco después del texto, coloca la segunda imagen, cuando el el texto a terminado, claro. No se como distribuir las columnas para conseguir ocupar el hueco y que no se estropee para dispositivos móviles. Gracias

introducir la descripción de la imagen aquí

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Todo sobre nosotros</title>
    <!-- mobile responsive meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <div class="wdt_100 pad_100">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4"><img src="https://ibb.co/nOMPLV" alt="image"></div>
          <div class="col-lg-8 col-md-8 col-sm-8 about_desc">
            <h3 class="black-color mar_btm30">Nuestra <span class="lytgreen-head">Historia</span></h3>
            <p> Desbroces y Limpieza de Fincas nos encontramos en la Sierra de Gredos, en Guisando, un pueblo al sur de la provincia de Avila.
                Nuestra radio de trabajo principalmente esta en Castilla y León, Comunidad de Madrid, Toledo, Caceres, aunque hemos realizado trabajos en toda 
                España: Barcelona, Lérida, Badajoz, Sevilla, Valencia, ...
                </p>
            <p class="black_txt">Nuestra empresa la compone un equipo de personas profesionales, cualificadas y altamente comprometidas con nuestros clientes que además 
              transmiten los valores de nuestra marca allá donde van, siendo éstos, servicio, calidad, seriedad y profesionalidad.</p>
              <p>Para nosotros la palabra “integral” tiene una connotación de servicio y responsabilidad para con nuestros clientes que va más allá del concepto comercial 
                que venden otras empresas, ya que nuestra experiencia nos ha enseñado que las necesidades nuestros clientes son más complejas e imprevisibles de lo que se
                pueda imaginar, por lo que nuestros parámetros de eficacia, responsabilidad y calidad son siempre los más altos.</p>
                <p class="black_txt">Es por eso que le ofrecemos todo un abanico de servicios relacionados a desbroces y limpieza de fincas y  parcelas, tanto urbanas como interurbanas.
                  Vallado de parcelas grandes o pequeñas, en malla galvanizada o en madera tratada contra los elementos.
                  Podas y remondes de todo tipo: frutales, olivares, pinos, todo clase de arboles en general.
                  Construimos o restauramos el muro de piedra que tantos años lleva rodeando su finca y se desmorona. </p>
            <h4>We Provide All Solutions under one Roof</h4><span class="friendly_customer_Txt">Friendly customer service staff for your all questions!</span><a href="services.html" class="view-all hvr-bounce-to-right slide_contact_btn slide_service_btn mar_lft_zero">OUr Services</a><a href="contact.html" class="view-all hvr-bounce-to-right slide_contact_btn service_mar_left">Contact Us</a>
          </div>

        </div>
      </div>
    </div>

    </body>
    </html>
7
  • 1
    que version de bootstrap usas? Commented el 21 nov. 2018 a las 19:39
  • 1
    @IgmerRodriguez En su código dice 3.3.6 Commented el 21 nov. 2018 a las 19:55
  • 1
    prueba <img src="ibb.co/nOMPLV" alt="Responsive image"> Commented el 21 nov. 2018 a las 20:10
  • 1
    img no es una clase, es una etiqueta. La clase que añadí fue img-responsive y es de Bootstrap Commented el 21 nov. 2018 a las 21:40
  • Perdone @JheymanMejia, la etiqueta img, he añadido lo que usted me sugirio, pero no surge el mismo efecto que en su ejemplo, que queda perfecto. En mi plantilla, la imagen ocupa tres partes de pantalla y el texto se pone debajo, comoen la captura que muestro: ibb.co/ncBNPq Commented el 21 nov. 2018 a las 21:50

1 respuesta 1

4

Espero y te sirva.

Lo que hice fue incluir la imagen dentro del contenedor que utilizas para el texto, añadir la clase img-responsive y aplicar la propiedad float: left; (También añadí un margen a la imagen)

img {    
    float: left;
    margin-right: 20px;
}
<html>
  <head>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    <meta charset="UTF-8">
    <title>Todo sobre nosotros</title>
    <!-- mobile responsive meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <div class="wdt_100 pad_100">
      <div class="container">
        <div class="row">          
          <div class="col-lg-8 col-md-8 col-sm-8 about_desc">
		  <img src="https://image.ibb.co/bC4dfV/about-img.jpg" alt="image">
            <h3 class="black-color mar_btm30">Nuestra <span class="lytgreen-head">Historia</span></h3>
            <p> Desbroces y Limpieza de Fincas nos encontramos en la Sierra de Gredos, en Guisando, un pueblo al sur de la provincia de Avila.
                Nuestra radio de trabajo principalmente esta en Castilla y León, Comunidad de Madrid, Toledo, Caceres, aunque hemos realizado trabajos en toda 
                España: Barcelona, Lérida, Badajoz, Sevilla, Valencia, ...
                </p>
            <p class="black_txt">Nuestra empresa la compone un equipo de personas profesionales, cualificadas y altamente comprometidas con nuestros clientes que además 
              transmiten los valores de nuestra marca allá donde van, siendo éstos, servicio, calidad, seriedad y profesionalidad.</p>
              <p>Para nosotros la palabra “integral” tiene una connotación de servicio y responsabilidad para con nuestros clientes que va más allá del concepto comercial 
                que venden otras empresas, ya que nuestra experiencia nos ha enseñado que las necesidades nuestros clientes son más complejas e imprevisibles de lo que se
                pueda imaginar, por lo que nuestros parámetros de eficacia, responsabilidad y calidad son siempre los más altos.</p>
                <p class="black_txt">Es por eso que le ofrecemos todo un abanico de servicios relacionados a desbroces y limpieza de fincas y  parcelas, tanto urbanas como interurbanas.
                  Vallado de parcelas grandes o pequeñas, en malla galvanizada o en madera tratada contra los elementos.
                  Podas y remondes de todo tipo: frutales, olivares, pinos, todo clase de arboles en general.
                  Construimos o restauramos el muro de piedra que tantos años lleva rodeando su finca y se desmorona. </p>
            <h4>We Provide All Solutions under one Roof</h4><span class="friendly_customer_Txt">Friendly customer service staff for your all questions!</span><a href="services.html" class="view-all hvr-bounce-to-right slide_contact_btn slide_service_btn mar_lft_zero">OUr Services</a><a href="contact.html" class="view-all hvr-bounce-to-right slide_contact_btn service_mar_left">Contact Us</a>
          </div>
          
        </div>
      </div>
    </div>    
	
    </body>
	
    </html>

De este modo el texto se desplaza debajo del "hueco" en blanco que estaba dejando anteriormente.


AÑADO

Tu código inicialmente es este:

<div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4"><img src="https://ibb.co/eFmGHA" alt="image"></div>
          <div class="col-lg-8 col-md-8 col-sm-8 about_desc">
            <h3 class="black-color mar_btm30">Nuestra <span class="lytgreen-head">Historia</span></h3>

Luego, quité todas las clases que tenía tu imagen y la moví dentro del div que usas para el texto. Hecho esto, apliqué dentro de la etiqueta de imagen la clase img-responsive (la cual es "nativa" de Bootstrap).

Quedando la modificación así:

<div class="row">          
          <div class="col-lg-8 col-md-8 col-sm-8 about_desc">
          <img src="https://image.ibb.co/bC4dfV/about-img.jpg" alt="image">
            <h3 class="black-color mar_btm30">Nuestra <span class="lytgreen-head">Historia</span></h3>

Ahora, para que todo funcione debes aplicarle a esa imagen en particular la propiedad float:left (los márgenes son opcionales).

Ya queda a decisión tuya cómo aplicarle esa propiedad, si con un ID o dentro de la etiqueta con un style. Si optas por la segunda forma, se vería así:

<div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4"><img style="float: left;" src="https://ibb.co/eFmGHA" alt="image"></div>
          <div class="col-lg-8 col-md-8 col-sm-8 about_desc">
            <h3 class="black-color mar_btm30">Nuestra <span class="lytgreen-head">Historia</span></h3>

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.