Ayuda con el diseño de un DIV en HTML y Bootstrap – html bootstrap

Pregunta:


Vengo diseñando la parte estática de mi sistema (la pagina web), pero estoy obteniendo un pequeño error a la hora de diseñar un div,

Lo que quiero obtener es que los elementos del div se acomoden y este no se agrande, es decir que quede como esta imagen:

introducir la descripción de la imagen aquí

Pero a la hora de ponerla mas cosas dentro del div ocurre una desgracia en el diseño:

introducir la descripción de la imagen aquí

Espero encontrar alguna solución.

El código que formé:

<div class="row">
  <div class="col-sm-3">
    <ul id="nav-tabs-wrapper" class="nav nav-tabs nav-pills nav-stacked well">
      <li class="active"><a href="#vtab1" data-toggle="tab">Accesorios</a></li>
      <li><a href="#vtab2" data-toggle="tab">Acopladores</a></li>
      <li><a href="#vtab3" data-toggle="tab">Audio</a></li>
      <li><a href="#vtab4" data-toggle="tab">Control de Accesos</a></li>
      <li><a href="#vtab5" data-toggle="tab">Control Remoto</a></li>
      <li><a href="#vtab6" data-toggle="tab">Entradas Binarias</a></li>
      <li><a href="#vtab7" data-toggle="tab">Estación Climática</a></li>
      <li><a href="#vtab8" data-toggle="tab">Gateways</a></li>
      <li><a href="#vtab9" data-toggle="tab">Módulos de Bus</a></li>
      <li><a href="#vtab10" data-toggle="tab">Salidas</a></li>
    </ul>
  </div>
  <div class="col-sm-9">
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="vtab1">
        <h3>Accesorios</h3>
        <div class="container" align="center">
          <div class="col-md-4">
            <div class="info-box-2 square-icon wow fadeInUp" data-wow-delay="0.5s">
              <div class="info-box-heading">
                <img src="http://www.lcn.com.mx/media/djcatalog2/images/item/3/lcn-nu16_m.jpg">
                <br>
                <h4>LCN-NU16</h4>
              </div>
              <div class="info-box-info">
                <p>El LCN-NU16 es un alimentador de tensión continua para la caja de empotrar.
                   El LCN-NU16 se usa para la alimentación del transpondedor LCN-UT o los
                   acopladores de pulsadores LCN-TEU, LCN-TE1 o LCN-TE2.</p>
              </div>
              <div class="view-more text-center">
                <a id="productos" class="btn btn-main btn-lg wow bounceInUp" data-wow-delay="1s" role="button">FICHA TÉCNICA</a>
                <a id="productos" class="btn btn-primary btn-lg wow bounceInUp" data-wow-delay="1s" role="button">GUÍA DE INSTALACIÓN</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="info-box-2 square-icon wow fadeInUp" data-wow-delay="0.5s">
              <div class="info-box-heading">
                <img src="http://www.lcn.com.mx/media/djcatalog2/images/item/3/lcn-nu16_m.jpg">
                <br>
                <h4>LCN-NU16</h4>
              </div>
              <div class="info-box-info">
                <p>El LCN-NU16 es un alimentador de tensión continua para la caja de empotrar.
                   El LCN-NU16 se usa para la alimentación del transpondedor LCN-UT o los
                   acopladores de pulsadores LCN-TEU, LCN-TE1 o LCN-TE2.</p>
              </div>
              <div class="view-more text-center">
                <a id="productos" class="btn btn-main btn-lg wow bounceInUp" data-wow-delay="1s" role="button">FICHA TÉCNICA</a>
                <a id="productos" class="btn btn-primary btn-lg wow bounceInUp" data-wow-delay="1s" role="button">GUÍA DE INSTALACIÓN</a>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="info-box-2 square-icon wow fadeInUp" data-wow-delay="0.5s">
              <div class="info-box-heading">
                <img src="http://www.lcn.com.mx/media/djcatalog2/images/item/3/lcn-nu16_m.jpg">
                <br>
                <h4>LCN-NU16</h4>
              </div>
              <div class="info-box-info">
                <p>El LCN-NU16 es un alimentador de tensión continua para la caja de empotrar.
                   El LCN-NU16 se usa para la alimentación del transpondedor LCN-UT o los
                   acopladores de pulsadores LCN-TEU, LCN-TE1 o LCN-TE2.</p>
              </div>
              <div class="view-more text-center">
               <a id="productos" class="btn btn-main btn-lg wow bounceInUp" data-wow-delay="1s" role="button">FICHA TÉCNICA</a>
                <a id="productos" class="btn btn-primary btn-lg wow bounceInUp" data-wow-delay="1s" role="button">GUÍA DE INSTALACIÓN</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="vtab2">
        <h3>Tab 2</h3>
        <p> Mauris imperdiet dignissim ante, in efficitur mauris elementum sed. Cras vulputate malesuada magna. Morbi tincidunt eros a dui cursus, vitae dignissim nulla scelerisque. Duis pharetra scelerisque mi vel luctus. Cras eu purus efficitur, blandit nisi id, fringilla nulla.</p>
      </div>
      <div role="tabpanel" class="tab-pane fade in" id="vtab3">
        <h3>Tab 3</h3>
        <p>Etiam id pharetra quam. Morbi tristique nunc vel sapien dapibus, sit amet imperdiet quam venenatis. Vestibulum et suscipit urna. Suspendisse volutpat quis est eu volutpat. Nulla non tortor venenatis turpis congue aliquet. Vivamus at elit vel massa elementum tempor sit amet sed odio. Nullam placerat, arcu sed ullamcorper ornare, erat erat placerat quam, in feugiat nulla purus in nunc. Maecenas vitae erat auctor, aliquam tellus et, vulputate eros.</p>
      </div>
    </div>
  </div>
</div>

Por otro lado les dejo el link donde por ahora estoy colgando la página, una vez finalizada la pregunta editare la pregunta.

ENTRAR A -> PRODUCTOS LCN -> VER MAS PRODUCTOS

http://168.235.83.190/~app/img/lcn/public_html/

Preguntado por: Joel More F.

pues con css es facil….

<style>
    #vtab1 { height: 500px; overflow-y: scroll;}
</style>

y el interior lo acomodas con mas css…para que se acomode mejor al “tab” y se vea mejor distribuido.

  <div class="col-sm-9" style="overflow-y:scroll;max-height:500px;">
  ...
  </div>

Así debería de funcionar
El estilo aplicado es un scroll al eje Y (al vertical) y la altura máxima que este div puede alcanzar son 500px.

Tienes que darle a tu div un alto fijo para que no re-dimensione y configurar overflow:scroll para que aparezca la barra, te dejo un ejemplo.

<div style="max-height:80%;overflow:scroll;">
  <div style="height:1000px;background:#ccc;">
  
  </div>
</div>

Si quieres ocultar la barra horizontal, tienes que agregar:

overflow-x: hidden;

para la vertical

overflow-y: hidden;

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *