javascript - 如何使用引导程序 3 为该行的特定列获取行类的全宽

Question

我使用 bootstrap 3 -row 和 column 类来分隔按钮。第二个按钮是可折叠的，显示谷歌地图。但我希望可折叠地图将占据该行的整个区域，尽管它位于该行的列中。可能吗？下面是我的代码：

<div class="row text-center c-green">
   <div class="col-md-6">
     <button class="btn-large btn-form" data-toggle= "modal" data-target=    "#contact-modal">Contact with us</button>
   </div>
    <div class="col-md-6">
      <a href="#map" data-toggle= "collapse" ><button class="btn-large btn-map">Click the button to see our batch location</button></a>
    <div id="map" class= "collapse"></div>
  </div>
</div>

这是输出图像

标签： javascripthtmlcsswebtwitter-bootstrap-3

Answer 1

您必须将地图包装在col-md-6.

尝试这个。

.map-wrapper {
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row text-center c-green">
      <div class="col-xs-6 col-md-6">
        <button class="btn btn-large btn-form" data-toggle= "modal" data-target="#contact-modal">Contact with us</button>
       </div>
       <div class="col-xs-6 col-md-6">
         <a href="#map" data-toggle= "collapse" ><button class="btn btn-large btn-map">Click the button to see our batch location</button></a>
        </div>
        <div id="map" class= "collapse map-wrapper">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d243647.31729967444!2d78.26761827225342!3d17.41229956311145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb99daeaebd2c7%3A0xae93b78392bafbc2!2sHyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1602912235163!5m2!1sen!2sin" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
         </div>
    </div>