我已经包含了我正在尝试做的事情的图片。我已经尝试了很多事情但没有成功。需要将文本连续排在一行,并在其下方连续显示更多文本,但是当屏幕缩小时,一组文本需要在另一组文本下面。我附上了我正在尝试做的事情的图片
<section id="international" class="international">
<div class="section-heading">
<h4 class="title wow fadeInDown" data-wow-delay=".3s"> Available Internationally</h4>
<p class="wow fadeInDown" data-wow-delay=".5s">
<div class="para">
Appropriate controllers and power cords are available for your country
</div>
</div>
</section>
<div class="row">
<div class="col-m-12 ">
<p class="para">
Power Formats
</p>
<div class="col-sm-4 ">
<p class="para">
Test
</p>
<p class="para">
12V
</p>
</div>
<div class="col-sm-4 ">
<p class="para">
测试
</div>
</div>
</div>
<div class="section-heading">
<h6 class="title-int wow fadeInDown" data-wow-delay=".3s"> Available Internationally</h6>
<p class="wow fadeInDown" data-wow-delay=".5s">
<div class="para-in">
Appropriate controllers and power cords are available for your country
</div>
<div class="row">
<div class="col-sm-12">
<p class="para-inter">
Power Formats
</p>
</div>
<div class="col-sm-12">
<div class="col-s-2 col-md-offset-2 col-sm-2 col-sm-offset-2 "></div>
<div class="col-sm-1 ">
<p class="para-int">
USA
</p>
<p class="para-int">
110V
</p>
</div>
<div class="col-sm-1 ">
<p class="para-int">
Europe
</p>
<p class="para-int">
230V
</p>
</div>
<div class="col-sm-1 ">
<p class="para-int">
Japan
</p>
<p class="para-int">
100V
</p>
</div>
<div class="col-sm-1 ">
<p class="para-int">
Australia
</p>
<p class="para-int">
240V
</p>
</div>
<div class="col-sm-1 ">
<p class="para-int">
UK
</p>
<p class="para-int">
230V
</p>
</div>
<div class="col-s-2 "></div>
</div>
</div>
</div>
</section>
答案 0 :(得分:0)
这是正确的HTML w / Bootstrap结构。
请参阅小提琴:https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/20/
HTML
<div class="row">
<div class="col-sm-12">
<p class="para">
Power Formats
</p>
</div>
<div class="col-sm-12">
<div class="col-sm-3 "></div>
<div class="col-sm-3 ">
<p class="para">
Test
</p>
<p class="para">
12V
</p>
</div>
<div class="col-sm-3 ">
<p class="para">
test
</p>
<p class="para">
12V
</p>
</div>
<div class="col-sm-3 "></div>
</div>
</div>