如何在整页上并排显示 2 个内容 - Bootstrap / CSS / laravel

Question

我有 2 个内容，我试图在整页上并排显示，一个在另一个下，当它的小尺寸屏幕（移动）时。我有点成功地在整页上并排显示它们，但是当它的小屏幕尺寸时，它们彼此重叠。

这是我的 master.blade 页面，我将它们都包含在

中

@yield:

<footer>
  <div class="container">
    <hr>
    <div class="row">
      <div class="col-md-12">
        <p class="text-center" style="font-size: 20px; ">MyHero &copy; {{ date('Y') }} </p>
      </div>
      @yield('map') // content 1
      @yield('Contact') // content 2
    </div>
  </div>
  <br><br><br>

</footer>

我的部分 css ('map') @section ('地图')

<div class="map" style="height:300px;width: 500px;display: block; float: left;"> 

我的部分 css ('contact')

@section('联系方式')

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <div class="cont" style="height:300px;width: 500px; display: block; float: right;">

Answer 1

您可以尝试使用 flexbox。 div 会根据可用的视口宽度进行调整。请注意，最好单独定义样式而不是内联样式。

.row {
  display:flex;
  flex-wrap:wrap;
}

.map, .cont {
  flex-grow: 1;
  height:300px;
  width: 500px;
}

    <div class="container">  
        <hr>
        <div class="col-md-12" > 
                <p class="text-center" style="font-size: 20px; " >MyHero &copy; {{ date('Y') }} </p>
            </div> 
        <div class="row"> 
            


                    <div class="map">content 1
                    
                    </div>
                    <div class="cont">
                    content 2
                    </div>


        </div>

Answer 2

这是你的意思吗？

基本上，我所做的所有工作都将您的 2 2 @yield() 包装在引导程序的网格类中，这将是页面上的 2 列，并且在中型设备和以下设备上应该彼此下降。

Bootstrap 3.3 Grid System Documentation

<footer>  
    <div class="container">  
        <hr>
        <div class="row"> 
            <div class="col-md-12" > 
                <p class="text-center" style="font-size: 20px; " >MyHero &copy; {{ date('Y') }} </p>
            </div> 

            <div class="col-md-6">
                    @yield('map') / content 1
            </div>
            <div class="col-md-6">
                    @yield('Contact') / content 2
            </div>

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

</footer>