Question

我有连续的视频。我希望它保留在页面右侧，作为该行的第二列。但是它一直显示在第一列下，好像它是第二行一样。

这是我的代码：

<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>

Answer 1

最简单的方法是使用CSS Flex-Box布局。如果您不知道从哪里开始，这里是教程的链接。

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

Answer 2

第一个问题：将<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>

视频不会停留在行引导程序的第二列

2 个答案: