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

这是我的代码:

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

最佳答案

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

关于html - 视频不会停留在行 bootstrap 的第二列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52318081/

10-11 23:25
查看更多