Question

我试图让这段代码表现得更响应，但我找不到一个好的解决方案。

随着浏览器窗口向移动尺寸缩小，列表变得非常狭窄，右侧的图片/视频项目变得非常小而且美观上令人不悦。我认为这部分是由于我无法将图片/视频项目放在中间列下方的正确位置，所有子弹点都允许向右扩展更多。

当网站变小时，我希望所有元素占据屏幕的全宽（当然使用默认填充）。从本质上讲，这意味着包含视频播放器和卡通片的最右侧列将移动到其左侧的条目下方。类似这样的事情：而不是目前看起来像上面代码在移动设备中看起来的样子：和。在桌面上保留这种外观：

<section id="about">
     <div class="container">
       <h3 class="font-weight-bold text-center">Discovering The Future.                        </h3>
         <div class="row mt-4">

         </div>
         <div class="row">
             <div class="col">
                <div class="row">                
                    <div class="col-auto">       
                        <img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
                    </div>
                    <div class="col pt-3">
                        <h2>The Cao Lab</h2>
                        <h3 class="font-weight-bold pt-1 pb-3">April 2016 - Present</h3>
                        <ul>
                            <li class="pb-3">Employ alkene metathesis to produce porous molecules valuable for encapsulation and adsorption applications</li>
                            <li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret results for molecules of interest</li>
                            <li class="pb-3">Communicate research to others by attending conferences and poster presentations</li>
                            <li class="pb-5">Devised a cost-effective method to quantify hydrogen production during evolution experiments</li>
                        </ul>
                    </div>
                    <div class="col-sm-3 ">

                            <div class="embed-responsive embed-responsive-5by3 teensie">
                              <iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/KPZ8HHRR1A0"></iframe></div>    
                     </div>
                </div>            
             </div>

         </div>
         <div class="row">
             <div class="col">
                 <div class="row">
                     <div class="col-auto">
                         <img src="https://picsum.photos/140/65" alt="" class="img-fluid testphoto">
                     </div>
                     <div class="col pt-3">
                         <h2>Institut Parisien de Chimie Moléculaire
                            </h2>
                         <p class="text-primary">National Science Foundation Internation REU Program.</p>
                         <h3 class="font-weight-bold pb-3">May 2017 - August 2017</h3>
                         <ul>
                             <li class="pb-3">Conduct study on the selective deprotection of perbenzylated a-cyclodextrin to access novel functionalization</li>
                             <li class="pb-3">Synthesize molecules suitable as ligands in metal-catalysis and for improving chiral HPLC discrimination ability</li>
                             <li class="pb-3">Prepare analytical samples, preform characterization analysis, and interpret data of cyclodextrin derivatives</li>
                             <li>Submitted abstract to present at the Chemical Education Division of the 255th ACS National Meeting</li>
                         </ul>                           
                     </div>
                     <div class="col-sm-3 ">
                            <img src="https://vignette.wikia.nocookie.net/rayman/images/c/cf/Teensy.png" alt="" class="img-fluid teensie2 ">
                            </div>
                     </div>

                 </div>

             </div>

         </div>

 </section>

CSS：

        .shift{
        margin-left:20px;
    }

    .barbie{
      list-style: none;
        margin: 0;
        padding: 0;
    }

    .barbieitem{
      //text-align: right;
      font-size: 1.3em;
    }
    .testphoto { 
      display: inline-block; 
      vertical-align:middle;
   }

    .joblist{
      display: inline-block;
    }

    .labname{
      display: inline-block; 
      vertical-align:middle;
      border:solid black 1px; 
    }

    .youtube {
      max-width: 300px;
      max-height: 300px;
      position: relative !important;
      float: right;

    }

    .teensie{
      top: 50%;
      left:50%;
      transform: translate(-50%,-50%);
    }

    .teensie2{
      position: relative;
      top: 50%;
      left:50%;
      transform: translate(-50%,-50%);
    }

Answer 1

正如我所理解的那样，您希望每一组image | content | image/video以更具响应性的方式崩溃，以便在较小的设备上查看内容时，一切都很容易阅读。< / p>

解决方案几乎完全取决于您如何实现Bootstrap Grid，并可能简化您的布局。检查您提供的结构，看起来您使用container-fluid尽管表示您想要占用整个宽度，并且您也可能在不需要它们的情况下使用嵌套网格

由于每个部分由3个在较小屏幕上折叠为全宽的列组成，因此我们可以将其视为每个row都是内容包装器的场景。在下面的代码段中，我设置了以下结构：

默认情况下，所有3列均为12宽。
第1列在中断点处（或更大）收缩至3宽
第2列在中断点处（或更大）收缩至5宽
第3列在中断点处（或更大）缩小到4宽

此时你的基础结构被布局......在小屏幕上，一切都是全宽的，在更大的范围内，你将开始在一行中看到所有3个内容元素。从这里开始，仅仅是添加一些额外的BS实用程序类来帮助一切正确呈现：

添加align-items-center mb-4会导致项目彼此垂直对齐，并增加每个row之间的下边距。
将mb-3 mb-md-0添加到第一列可确保在较小的屏幕上每个图像下方都有填充。
将pb-2添加到<ul>并将最后pb-5更改为pb-3可以实现相同的填充，同时可以更方便地以编程方式填充这些列表项。< / LI>

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <h3 class="text-center">Page Title</h3>
    </div>
  </div>
  
  <!-- This is where each content group starts -->
  <div class="row align-items-center mb-4">
    <div class="col-12 col-md-3 mb-3 mb-md-0 text-center">
      <img src="http://placehold.it/300x300" class="img-fluid" />
    </div>
    
    <div class="col-12 col-md-5">
        <h2>Section Title</h2>
        <h3 class="pt-1 pb-3">Date</h3>

        <ul class="pb-2">
        <li class="pb-3">List Item #1</li>
        <li class="pb-3">List Item #2</li>
        <li class="pb-3">List Item #3</li>
        <li class="pb-3">List Item #4</li>
        </ul>
    </div>
        
    <div class="col-12 col-md-4">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
  <!-- This is where each content group ends -->
</div>

＆＃13;

注意：您需要展开代码段以查看其响应性质，并且SO可能不允许嵌入式<iframe>进行处理。将代码段复制并粘贴到本地HTML文件中可以让您查看所有内容。

如何使这个Bootstrap 4代码更具响应性？

1 个答案: