如何使用Bootstrap调整大小和居中

Question

这是我的页面：

我希望页面元素以这种方式显示在桌面上：

在移动设备上：

这是HTML代码：

<div class="page-section">
  <div class="container">
    <div class="row mb-5">
      <div id="youtube_ifram" class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/m2KVWytDGb0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/lgozQO7NOU4" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/TVuumNBGYNg" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>

Answer 1

根据引导文档，您可以在主行上使用justify-content-center将内容居中。

<div class="page-section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-6">
      <div id="youtube_ifram" class="embed-responsive embed-responsive-16by9">        
      <iframe src="https://www.youtube.com/embed/m2KVWytDGb0" frameborder="0"   allowfullscreen></iframe>
      </div>
      <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/lgozQO7NOU4" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/TVuumNBGYNg" frameborder="0" allowfullscreen></iframe>
      </div>
        </div>
      </div>
    </div>
</div>

Answer 2

您可以将此Css添加到您的html

.embed-responsive{
    width: 23%;
    margin-left: auto;
    margin-right: auto;
}

<div class="page-section">
		<div class="container">
			<div class="row mb-5">
	  <div id="youtube_ifram" class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/m2KVWytDGb0" frameborder="0" allowfullscreen></iframe>
	  </div>
	  <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/lgozQO7NOU4" frameborder="0" allowfullscreen></iframe>
	  </div>
	  <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/TVuumNBGYNg" frameborder="0" allowfullscreen></iframe>
	  </div>
					</div>
					</div>
		</div>

Answer 3

有一个引导程序大小指南： https://getbootstrap.com/docs/4.1/utilities/sizing/

Answer 4

您需要将div居中，并根据需要指定“ myclass”和相应的宽度。对于移动设备视图，只需添加一个媒体查询并将最小宽度设置为100％，我就一起添加了一个提琴文件，希望这对提琴有帮助：https://jsfiddle.net/q7absh8e/3/

<div class="page-section">
    <div class="container">
        <div class="row">
  <div class="myclass">
  <div id="youtube_ifram" class="embed-responsive embed-responsive-16by9">        <iframe src="https://www.youtube.com/embed/m2KVWytDGb0" frameborder="0"   allowfullscreen></iframe>
  </div>
  <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/lgozQO7NOU4" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/TVuumNBGYNg" frameborder="0" allowfullscreen></iframe>
  </div>
  </div>
        </div>
    </div>
</div>

这是css文件

.myclass{
   display:table;
   text-align:center;
   margin:0 auto;
   min-width:640px;
    }

iframe{
   width:100%;
}

Answer 5

如果您使用引导程序4，则可以使用 w-75 和 m-auto

   <div class="page-section">
         <div class="container">
            <div class="row mb-5 ">
                <div id="youtube_ifram" class="embed-responsive w-50 m-auto embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/m2KVWytDGb0" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="embed-responsive w-50 m-auto embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/lgozQO7NOU4" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="embed-responsive w-50 m-auto embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/TVuumNBGYNg" frameborder="0" allowfullscreen></iframe>
                </div>

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

Answer 6

尝试以下代码：

text-align:center;
float:none;
display:inline-block;