Remove scroll bootstrap

0

I'm making a web page in Boostrap and I want the content to be adapted to the size of the screen on the home page (home), that is, there is neither vertical nor horizontal scroll.

How can I do it to remove it?

This is my code:

html, body, .container-fluid {
  height: 100%;
}

.direccion {
  font-size: 0.9em;
}

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }

  .sidebar-nav .navbar ul {
    float: none;
  }

  .sidebar-nav .navbar ul:not {
    display: block;
  }

  .sidebar-nav .navbar li {
    float:none;
    display: block;
  }

  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .logo_menu {
    width: 50%;
    margin: 0 auto;
  }
}

.rrss {
  margin-left: 5%;
}

.col-sm-2 {
  padding-right:0; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-2">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!--<span class="visible-xs navbar-brand">Sidebar menu</span>-->
        </div>
        <a href="index.html"><img class="img-responsive logo_menu" src="http://placehold.it/200x200" alt="logo home"/></a>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Quienes somos</a></li>
            <li><a href="#">Que hacemos</a></li>
            <li><a href="#">Quiero trabajar</a></li>
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Noticias</a></li>
          </ul><br/>

          <div class="rrss">
            <a href="#"><img src="images/facebook.png" width="10%" alt="facebook"/></a>&nbsp;
            <a href="#"><img src="images/twitter.png" width="10%" alt="twitter"/></a>
            <!--<i class="fa fa-facebook fa-lg" aria-hidden="true"></i>&nbsp;
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>-->
          </div><br/>

          <div class="direccion rrss">
            <p>Dirección de la empresa</p>
            <!--<p>@2016 Sabrina Couto. All rights reserved.</p>-->
          </div>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>


  <div class="container-fluid">
    <div class="col-sm-10">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://placehold.it/2000x900/ff0000" alt="Chania">
            <div class="carousel-caption">
              <h1>Innovación y desarrollo de nuevas técnicas de ventas</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/00ff00" alt="Chania">
            <div class="carousel-caption">
              <h1>Formamos a toda nuestra gente desde la base</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/0000ff" alt="Flower">
            <div class="carousel-caption">
              <h1>Profesionalidad, calidad y experiencia en ventas</h1>
            </div>
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>
    
asked by Sabrina 27.07.2016 в 09:10
source

2 answers

1

Add row-fluid instead of using row for 100% widths

html, body, .container-fluid {
  height: 100%;
}

.direccion {
  font-size: 0.9em;
}

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }

  .sidebar-nav .navbar ul {
    float: none;
  }

  .sidebar-nav .navbar ul:not {
    display: block;
  }

  .sidebar-nav .navbar li {
    float:none;
    display: block;
  }

  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .logo_menu {
    width: 50%;
    margin: 0 auto;
  }
}

.rrss {
  margin-left: 5%;
}

.col-sm-2 {
  padding-right:0; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row-fluid">
  <div class="col-sm-2">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!--<span class="visible-xs navbar-brand">Sidebar menu</span>-->
        </div>
        <a href="index.html"><img class="img-responsive logo_menu" src="http://placehold.it/200x200" alt="logo home"/></a>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Quienes somos</a></li>
            <li><a href="#">Que hacemos</a></li>
            <li><a href="#">Quiero trabajar</a></li>
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Noticias</a></li>
          </ul><br/>

          <div class="rrss">
            <a href="#"><img src="images/facebook.png" width="10%" alt="facebook"/></a>&nbsp;
            <a href="#"><img src="images/twitter.png" width="10%" alt="twitter"/></a>
            <!--<i class="fa fa-facebook fa-lg" aria-hidden="true"></i>&nbsp;
<i class="fa fa-twitter fa-lg" aria-hidden="true"></i>-->
          </div><br/>

          <div class="direccion rrss">
            <p>Dirección de la empresa</p>
            <!--<p>@2016 Sabrina Couto. All rights reserved.</p>-->
          </div>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>


  <div class="container-fluid">
    <div class="col-sm-10">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://placehold.it/2000x900/ff0000" alt="Chania">
            <div class="carousel-caption">
              <h1>Innovación y desarrollo de nuevas técnicas de ventas</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/00ff00" alt="Chania">
            <div class="carousel-caption">
              <h1>Formamos a toda nuestra gente desde la base</h1>
            </div>
          </div>

          <div class="item">
            <img src="http://placehold.it/2000x900/0000ff" alt="Flower">
            <div class="carousel-caption">
              <h1>Profesionalidad, calidad y experiencia en ventas</h1>
            </div>
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</div>
    
answered by 27.07.2016 / 15:30
source
-1

Add width: 100% to the element that is generating the scroll.

    
answered by 27.07.2016 в 13:34