【发布时间】：2018-01-30 04:14:11
【问题描述】：
我正在尝试让此代码的响应更加灵敏，但我一直未能找到好的解决方案。
随着浏览器窗口向移动设备尺寸缩小，列表变得非常狭窄，右侧的图片/视频项目变得非常小且不美观。我认为这部分是由于我无法将右侧的图片/视频项目移到中心列下方，该项目包含所有项目符号以允许向右扩展更多。
随着网站变小，我希望所有元素都占据屏幕的全宽（当然是默认填充）。本质上，这意味着包含视频播放器和卡通的最右侧列将移动到其左侧的条目下方。像这样的东西：，而不是上面的代码目前在移动设备中的样子：和。在桌面上保留这种外观：
<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%);
}
【问题讨论】：
-
您尝试过什么来实现更好的响应能力？您的代码不建议您使用或尝试使用任何额外的断点。我也不清楚为什么你的这么多列是嵌入在网格中的网格的一部分？
-
实际上，这是一个修改后的脚手架解决方案，作为对我之前的一个问题的回答，我被指示作为一个单独的问题提出：/ 相反。相关操作：stackoverflow.com/questions/48491026/…
-
这与上一个问题有关实际上使这个问题不太合适，尤其是考虑到您提供的代码并未表明已尝试寻找解决方案。
-
我确实尝试了几种解决方案，这是“最好的”。我试着避免提出一个新问题，然后我因为没有提出一个新问题而被骂。现在我提出了一个新问题，而你叫我提出一个新问题，没有人提供有用的答案，所以....抱歉，但伪善很多吗？
-
你称之为虚伪......但实际上任何人都想要一个明确的问题。您提供的 HTML 不是一个最小示例，您拒绝回答为什么它也不会尝试您希望它做的任何事情……而是通过引用先前提出的问题来转移注意力。我会尽快为您的结构提交一个潜在的解决方案，但我会鼓励您考虑如何在未来更好地提出问题和回应批评。
标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4