-1

Hola hice un carrousel con bootstrap y me quedan unos bordes,osea no agarra todo el ancho de la pantalla y tambien los deja arriba y a bajo,sinceramente soy muy novato y no se que debo estar haciendo mal,desde ya muchas gracias por las respuestas!

 

 
 
 .header{
    background-color: transparent  !important;
    background: url(imagenes/Costa-Rica.jpg) fixed center;
     background-size: cover; 
     min-height: 650px;
     font-family: 'Lato', sans-serif;
    font-size: 18px;
     
}

.mi-navbar{
    background-color: rgb(0, 0, 0 ,0.5) 
}



  
  /* TURISMO */



    .fotos1 img{
        height: 650px;
        
                       }
        

   
    .carrosel{
        height: 100%;
        width: 100%;
        

                     }

    

      /* COMIDA */

    .contenedor{
        background: url(imagenes/pinches-cocineros.jpg);
        background-size: cover; 
        width: 100%;
        height: 900px;
        text-align: center;
                          }
       
                          .contenedor  img{
                       
                               width: 300px;
                               height: 300px;
                               margin-bottom: 20px;
                               
                                
                           }  
                       
                       
                       .cards{
                            
                            color: white;
                            background-color: rgba(8, 8, 8, 0.7);
                            border-radius: 5px;
                            
                           }
                            
                        .cards:hover{
                       
                           color: rgb(10, 12, 12);
                            background-color: rgba(252, 249, 249, 0.445);
                            font-family: 'Lato', sans-serif;
                            
                        }
        
                        /* Hoteleria */

        .hoteleria, img{
            height: 200px;
            margin: 20px;
            
        }

        .hoteleria{
            margin: 50px;
            width: 100%;
            height: 550px;
        }

           

   

      
     
<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
       <!-- Enlaces externos -->
       <link rel="stylesheet" href="estilos.css">
       <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
       <link rel="icon" href="imagenes/kisspng-costa-rica-logistics-cargo-goods-flag-costa-rica-5b36c327f14075.6562725615303155599882.ico">
       <!-- Bootstrap CSS -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
       <title>El lugar donde queres viajar</title>
       
    
    

  </head>
  <body>
                                          <!-- NAVBAR -->



        <header id="inicio" class="header">

          
          <nav class="mi-navbar navbar fixed-top  navbar-expand-lg navbar-light">
              <a class="navbar-brand text-primary ml-4" href="#">Costa <span class="text-danger">Rica</span>  </a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class=" collapse navbar-collapse" id="navbarNav">
                <ul class="casa navbar-nav m-auto">
                  <li class="nav-item active">
                    <a class="nav-link text-light mr-5" href="#inicio">Inicio <span class="sr-only">(current)</span></a>
                  </li> 
                  <li class="nav-item">
                      <a class="nav-link text-light mr-5" href="#turismo">Turismo</a>
                   
                  </li>
                  <li class="nav-item">
                      <a class="nav-link text-light mr-5" href="#comida">Comidas</a>
                    </li>
                  <li class="nav-item">
                      <a class="nav-link text-light mr-5" href="#hoteleria">Hoteleria</a>
                    </li>
                  
                  <li class="nav-item ">
                    <a class="nav-link text-light mr-5" href="index5.html">Nosotros</a>
                  </li>
                  
                </ul>
              </div>
            </nav>

            <div>
     
                    <!-- que carajo es -->

                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                      <img src="..." class="rounded mr-2" alt="...">
                      <strong class="mr-auto">Bootstrap</strong>
                      <small class="text-muted">just now</small>
                      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="toast-body">
                      See? Just like this.
                    </div>
                  </div>
                   </header>
                  
              
            
                
         


                     <!-- CARRUSEL -->
                     <section id="turismo">

                   <div class="carousel">

                  <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
                      <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                      </ol>

                      
                      <div class="fotos1 carousel-inner ">

                        <div class="carousel-item active">
                         <img src="imagenes/costarica-volcan.jpg" class="d-block w-100" alt="...">
                           
                            <div class="carousel-caption d-none d-md-block">
                              <h5>Volcan Arenal</h5>
                               <p>Una de las razones princiaples de viajar a Costa Rica, <br> es conocer su magnifica naturaleza,y sus increibles parques nacionales protegidos!</p>
                                </div>

                                  </div> 


                           
                                   <div class="carousel-item">
                                     <img src="imagenes/costa-rica-4.jpg" class="d-block w-100 img-fluid" alt="...">
                                 <div class="carousel-caption d-none d-md-block">
                                        <h5>Puntarena</h5>
                                         <p>
                                            Puntarenas es una ciudad portuaria en el Golfo de Nicoya, en Costa Rica. Su Casa de la Cultura alberga un teatro y una galería de arte. En la avenida principal, Paseo de los Turistas, el Parque Marino del Pacífico posee un acuario y un centro de rescate con caballos de mar, tortugas y cocodrilos. La playa de la ciudad, llamada Playa Puntarenas, cuenta con tiendas y cafeterías. Al sudeste, se encuentra Playa Doña Ana, conocida por su fuerte oleaje.</p>
                                           </div>
                                             </div>
        
                                            <div class="carousel-item">
                                          <img src="imagenes/costaricamonte.jpg" class="d-block w-100 img-fluid" alt="...">
                                            <div class="carousel-caption d-none d-md-block">
                                              <h5>Monteverde</h5>
                                                <p>Monteverde es una población situada en la zona montañosa del noroeste de Costa Rica. Es conocida por la biodiversidad de sus bosques nubosos. La famosa Reserva Biológica del Bosque Nuboso de Monteverde alberga un sinfín de especies silvestres, como jaguares, ocelotes y esplendorosos quetzales con plumas de colores. Los senderos señalizados de la reserva atraviesan campos de helechos y orquídeas, y, por arriba, hay puentes colgantes para pasear por encima de la cubierta forestal.</p>
                                                  </div>
                                                   
                                                    </div>
                                                
                                                     </div>
                                                     
                                                     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                                       <span class="flecha carousel-control-prev-icon" aria-hidden="true"></span>
                                                       <span class="sr-only">Anterior</span>
                                                         </a>
                               
                                                     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                                       <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                       <span class="sr-only">Siguiente</span>
                                                      </a>
                                                    </div>


                                                  </section>
                                                     
                                                     
                                                     
                                                     
                                                      

                                     <!-- COMIDA -->
                                                     
                                     <div id="comida" class="contenedor  d-flex justify-content-around align-items-center text-aling-center">
       
                                      <div class="row">
                              
                                          <div class="col-4">
                                                  <div class=" bg-transparent mr-5" style="width: 20rem;">
                                                          <img src="imagenes/costa-rica-casado.jpg" class="card-img-top rounded-circle img-thumbnail" alt="...">
                                                          <div class="card-body cards">
                                                            <h5 class="card-title text-color-white">Casado</h5>
                                                            <p>Casado o comida típica, es el plato más común en Costa Rica. Se compone de frijoles, arroz con pimientos rojos finamente cortados en cubitos y cebollas, plátanos fritos, una ensalada de repollo con tomate y zanahoria, y una selección de carne entre pollo, pescado, carne de cerdo o de ternera con cebollas asadas.</p>
                                                            <!-- <a href="#" class="btn btn-secondary">Leer Más</a> -->
                                                          </div>
                                                        </div>
                                                      </div>
                              
                              
                              
                                          <div class="col-4">
                              
                                                  <div class=" bg-transparent ml-4" style="width: 20rem;">
                                                          <img src="imagenes/ceviche.jpg" class="card-img-top rounded-circle img-thumbnail" alt="...">
                                                          <div class="card-body cards">
                                                            <h5 class="card-title">Ceviche</h5>
                                                            <p class="pb-4">El ceviche es un aperitivo que consiste en pescado crudo fresco marinado en jugos cítricos como limón con hierbas finamente picadas y verduras. En Costa Rica, el mejor ceviche está hecho con tilapia local o corvina (lubina blanco) y el cilantro, el ajo, el ají, la cebolla y el apio.</p>
                                                            <!-- <a href="#" class="btn btn-secondary mt-4">Leer Más</a> -->
                                                          </div>
                                                        </div>
                              
                                          </div>
                              
                              
                                          
                                          <div class="col-4">
                              
                                                  <div class=" bg-transparent ml-5" style="width: 20rem;" >
                                                          <img src="imagenes/tamales-2.jpg" class="card-img-top rounded-circle img-thumbnail" alt="...">
                                                          <div class="card-body cards">
                                                            <h5 class="card-title">Tamales</h5>
                                                            <p>Tamales de Cerdo (Costa Rica). Los tamales son un plato originario de las culturas Mayas y Aztecas y que con el tiempo se han propagado por las dos Américas y el Caribe. En cada país y región se han creado variantes no sólo en los ingredientes sino también la forma de hacerlo, aún con los mismos ingredientes.</p>
                                                            <!-- <a href="#" class="btn btn-secondary">Leer Más</a> -->
                                                          </div>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div> 
                                                </section>

 
 
                                                    </div>
                                                  </div> -->
 


                                                </section>

                                                
                                                  

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

                           
                                
                               
                                                                                


                                                                    
                                                                 
                                                                
                                                  
                                                              
                                                      
                                           
                                        
                                 
                                 
                                 

                                               
                                    
                                    

                                      
                                               


              
           
     
    





<script>
    $(document).ready(function(){
     $("#boton").click(function(){
     $("#parrafo").toggle(5000);
     });
    });
    </script>





    


    <script>
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});</script>
   
  </body>
</html>

1 respuesta 1

0

Cuesta ver el problema ya que la ejecución no carga muy bien pero ante esto puedes seguir el siguiente procedimiento para ver que tal:

1.- Usa el inspector de elementos de tu navegadores.

2.- Posa sobre el elemento por el cual ves el borde y revisa sus estilos CSS.

Esto realmente es muy simple, el inspector de elementos te dirá cual tiene el borde (a simple vista puede ser una cosa distinta a la que muestra la consola).

Para eliminarlo es simple, usando la propiedad CSS border:none; le dirás al elemento que elimine los bordes.

Si de casualidad ves que eliminó parcialmente los bordes eso se debe a que la incrustación de ese borde fue más especifica ¿Cómo así?

la propiedad border se divide en:

border-top: ; (arriba)

border-left: ; (derecha)

border-right: ; (izquierda)

border-bottom: ; (abajo)

podrás hacer la prueba correspondiente nada más poniendo la propiedad border con el respectivo lado donde se presente el mismo poner 0.

En caso de que la propiedad se mantenga puedes usar la declaración !important y esto hará que el archivo sobreponga esa propiedad ante cualquier otra igual a esa. Ejemplo: border: 2px solid #3a3a3a !important;

Espero haberte sido de ayuda :)

1
  • ya lo arregle muchas gracias por todo... tengo otro problema la verdad ahora,no se si tienes un correo para mostrarte q es lo q pasa! el 1 feb. 2019 a las 15:33

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.