1

Estoy utilizando bootstrap para una página web, utilicé una grid con dos columnas para colocar un slider y un video de forma horizontal el cual quiero juntar, pero tengo un detalle entre slider y el video es tengo un espacio y quiero juntarlas

Este es mi codigo:

<!DOCTYPE>
<head>
<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head> 
<body>
    <div class="row ">
        <div class="col-sm-6" style="margin: 0px">
            <!--carousel-->
            <div class="header-content-right">
                <div id="carouselExampleIndicators" class="carousel slide" 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="carousel-inner">
                        <div class="carousel-item active">
                            <img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class="img-responsive" alt="prueba 1">
                            <!-- height="80%" width="80%"-->
                            <div class="carousel-caption d-none d-md-block">
                                <h5>prueba 1</h5>
                                <p>.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class=" img-responsive" alt="Second slide">
                            <!--height="80%" width="80%"-->
                            <div class="carousel-caption d-none d-md-block">
                                <h5>prueba 2</h5>
                                <p>.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class="img-responsive" alt="Third slide">
                            <!-- height="80%" width="80%"-->
                            <div class="carousel-caption d-none d-md-block">
                                <h5>prueba 3</h5>
                                <p>.</p>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="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>
            </div>
        </div>

        <div class=" col-sm-6 ">
            <!--VIDEO -->
            <div id="video" class="header-content-right" style="margin:0px">
                <div class="delimitador">
                    <div class="contenedor">
                        <iframe src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" controls="controls"></iframe>
                    </div>

                </div>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

</body>
</html>

4
  • por css youpuedes usar : style="margin-left:15px;".....margin-right..margin-top...etc... Commented el 26 jun. 2018 a las 14:18
  • este estilo agregalo en :<div class=" col-sm-6 " style="....."> Commented el 26 jun. 2018 a las 14:18
  • no he modifica de esa forma y todavía no me funciona ! :s Commented el 26 jun. 2018 a las 14:21
  • style="margin: 0px" estas poniendolo mal... fijate no especificas el tipo de margin Commented el 26 jun. 2018 a las 14:26

1 respuesta 1

1

Entre las columnas hay un espacio, quita el padding y el margin y listo.

<!DOCTYPE>
<head>
<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head> 
<body>
    <div class="row ">
        <div class="col-sm-6" style="margin: 0px; padding: 0px;">
            <!--carousel-->
            <div class="header-content-right">
                <div id="carouselExampleIndicators" class="carousel slide" 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="carousel-inner">
                        <div class="carousel-item active">
                            <img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class="img-responsive" alt="prueba 1">
                            <!-- height="80%" width="80%"-->
                            <div class="carousel-caption d-none d-md-block">
                                <h5>prueba 1</h5>
                                <p>.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class=" img-responsive" alt="Second slide">
                            <!--height="80%" width="80%"-->
                            <div class="carousel-caption d-none d-md-block">
                                <h5>prueba 2</h5>
                                <p>.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class="img-responsive" alt="Third slide">
                            <!-- height="80%" width="80%"-->
                            <div class="carousel-caption d-none d-md-block">
                                <h5>prueba 3</h5>
                                <p>.</p>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="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>
            </div>
        </div>

        <div class=" col-sm-6 " style="margin: 0px; padding: 0px;">
            <!--VIDEO -->
            <div id="video" class="header-content-right" style="margin:0px">
                <div class="delimitador">
                    <div class="contenedor">
                        <iframe style="height:100%;" src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" controls="controls"></iframe>
                    </div>

                </div>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script>
$('.contenedor').height($('.carousel-inner').height());
</script>
</body>
</html>

0

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.