Question

我正在使用bootstrap mPurpose-master主题。在这里有一个部分，其中有一个功能可以连续放置3个块，它完全响应。

<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                DATA ONE
            </div>
            <div class="col-md-4 col-sm-6">
                DATA TWO
            </div>
            <div class="col-md-4 col-sm-6>
                DATA THREE
            </div>
        </div>
    </div>
</div>

我希望修改此部分，并希望将视频放在屏幕/行的中间，并使其响应。为此，我尝试了以下代码。我将第一个和第三个div留空并将视频放在第二个div中。

<div class="section">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">

            </div>
            <div class="col-md-4 col-sm-6">
                <video controls autoplay height="340" width="267" >
                    <source src="<? echo $video_link;?>" type="video/mp4">
                </video>
            </div>
            <div class="col-md-4 col-sm-6>

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

它工作正常，但问题是如果我改变视频的高度和宽度，它就会停止响应。

我尝试的第二种方法是：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <video  controls autoplay >
                <source src="<? echo $video_link;?>" type="video/mp4">
            </video>
        </div>
    </div>
</div>

但是它将视频放在左侧，也没有使其响应

目前视频的高度和宽度太小。我想要三件事。
1）将视频大小增加到640 * 360。
2）将其放入屏幕中央。
3）使其响应。

Answer 1

如果您想要在此行中唯一拥有的是视频，那么您就不必使用列。如果您应用以下CSS，则应使视频居中并具有响应性：

#video-containing-div video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

现在，将宽度和高度硬编码到HTML中会取消视频的响应性＆＃34;。此外，我可能在这里错过了一些东西，但是如果你尝试用造型来增加视频的大小，你只会把它炸掉而失去图像质量。要增加视频的大小，您需要以更高的分辨率拍摄。

Answer 2

你不能只创建一个以视频为中心的div吗？通过这种方式，您甚至不必使用该引导列。在HTML中尝试这样的事情：

<div class="row">
    <div class="video">
        Paste your video in here
    </div>
</div>

然后你的CSS应该是这样的：

.video {
    margin-left:auto;
    margin-right:auto;
    max-width: 640px; //since you want the maximum width of the video to be 640px
}

将视频放在html页面上，并使用bootstrap使其响应

2 个答案: