Видео не будет оставаться во 2-м столбце начальной загрузки строки

У меня есть видео, которое идет подряд. Я хочу, чтобы он оставался справа от страницы во втором столбце строки. Но он продолжает появляться под первым столбцом, как будто это вторая строка.

вот мой код:

<section class="container-fluid aboutus">
  <div classs="row">
    <div class="col-sm-5">
        <h1>Our Mission</h1> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        <div class="button">
            <a href="#"><button type="button" class="btn btn-outline-primary btn-lg">Read more</button></a>
        </div>
    </div>

    <div class="col-sm-7 video">
        <div>
            <video autoplay muted loop width="550">
            <source src="video/Markcard.m4v" type="video/mp4" />
        </video> 
        </div>

    </div>
  </div>

</section>  
0
0
22
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Самый простой способ добиться этого - использовать макет CSS Flex-Box. Вот ссылка на учебное пособие, если вы не знаете, с чего начать.

https://www.w3schools.com/css/css3_flexbox.asp

Ответ принят как подходящий

Первая проблема: заменить <div classs="row"> на <div class="row">
Вторая проблема: col-sm-* будет работать только с небольшими устройствами, которые вам также могут понадобиться для работы с другими устройствами. В приведенном ниже примере я просто использовал col-*.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section class="container-fluid aboutus">
  <div class="row">
    <div class="col-5">
        <h1>Our Mission</h1> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        <div class="button">
            <a href="#"><button type="button" class="btn btn-outline-primary btn-lg">Read more</button></a>
        </div>
    </div>

    <div class="col-7 video">
        <div>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </video> 
        </div>

    </div>
  </div>

</section>  

Большое спасибо! Я даже не догадывалась, что неправильно написала на уроке.

T.C 13.09.2018 18:53

Другие вопросы по теме