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

【问题标题】：How can get full width of a row class for a specific column of that row using bootstrap 3如何使用引导程序 3 为该行的特定列获取行类的全宽
【发布时间】：2021-01-31 05:24:16
【问题描述】：

我使用 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>

Here is the output image

【问题讨论】：

您希望可折叠地图占据整个屏幕宽度并仅使用引导程序隐藏联系我们部分？
Bootstrap ,css 和 javascript 都可以使用...

标签： javascript html css web twitter-bootstrap-3

【解决方案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>

【讨论】：