Question

为更好地说明问题，请参见the video和jsfiddle。

<div class="container-fluid">  
   <div class="container">
     <img src="https://image.com"/>
     <h1>lorem ipsum dolor</h1>
  </div>

尽管窗口具有一定的宽度，但文本的一部分位于图像下方，而另一部分保留在图像旁边。我如何防止文本分割，所以当窗口达到此特定宽度时，整个短语“ lorem ipsum dolor”会出现在图像下方，而不仅仅是“ dolor”？我正在使用引导程序，是否有专门用于此操作的特殊<div>类？将文本放在container或content中不能解决问题。

Answer 1

我希望这会有所帮助。

body {
    background-image: linear-gradient(to bottom right,#09845A, #8733DD);
}

.flex {
  display:flex;
  justify-content:center;
}

@media screen and (max-width:728px) {
  .flex {
    flex-direction:column;
    align-items:center;
  }
  .img {
  background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
  width:100px;
}
}

.img {
  background:url("https://www.google.pl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
  height:92px;
  width:272px;
}
.container-fluid {
  background: rgba(0,0,0,0.75);
  
}

.container {
  display:block;
	overflow:auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container-fluid">  
  
    <div class="flex">
    <div class="img"></div>
      <h1>
      Ulecz się rozmową
      </h1>
      
    </div>
  </div>
</body>

Answer 2

这应该有所帮助。 https://www.w3schools.com/code/tryit.asp?filename=FY3DOVSFM4MZ

基本上，您需要给col-sm-12告知，在小屏幕上，此项目应为全宽。

Answer 3

为什么不尝试像这样使用列。

<div class="container-fluid">  
   <div class="container">
<div class="col-md-6 col-sm-12 col-xs-12">
   <img src="https://image.com"/>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
  <h1>lorem ipsum dolor</h1>
</div>   
</div>

如何使文本始终显示在一起？引导程序

3 个答案: