如何在Bootstrap中调整容器中的内容？

Question

我在容器中调整iframe时遇到问题。它看起来像这样：

你可以看到iframe没有全宽，我不知道为什么。

<div class="container container-kontakt-map">
<div class="row">
<div class="col-md-12">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2653.988373019885!2d18.06349931521357!3d48.303075047599364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476b3f0675b17005%3A0xd42d09b53f2f872f!2sPoliklinika+Kloko%C4%8Dina%2C+Hviezdoslavova+trieda+1%2C+949+11+Nitra!5e0!3m2!1sen!2ssk!4v1451834396880" width="100%" height="400px" frameborder="" style=""></iframe>
    </div>
</div>
</div>

这是html，这里是css：

  .container-kontakt-map {
margin-top: 70px;
width: 100%;
}

我做错了什么？

Answer 1

检查控制台中的元素，您将看到Bootstrap中的容器具有填充/边距。您可以取下容器类以获得全宽度结果。

<div class="row container-kontakt-map">
    <div class="col-md-12">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2653.988373019885!2d18.06349931521357!3d48.303075047599364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476b3f0675b17005%3A0xd42d09b53f2f872f!2sPoliklinika+Kloko%C4%8Dina%2C+Hviezdoslavova+trieda+1%2C+949+11+Nitra!5e0!3m2!1sen!2ssk!4v1451834396880" width="100%" height="400px" frameborder="" style=""></iframe>
    </div>
</div>

Bootstrap Container

Answer 2

容器有填充/边距，你需要摆脱它。

<div class="container-kontakt-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2653.988373019885!2d18.06349931521357!3d48.303075047599364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476b3f0675b17005%3A0xd42d09b53f2f872f!2sPoliklinika+Kloko%C4%8Dina%2C+Hviezdoslavova+trieda+1%2C+949+11+Nitra!5e0!3m2!1sen!2ssk!4v1451834396880" width="100%" height="400px" frameborder="" style=""></iframe>
</div>