文字靠近在一起,彼此相邻(包括图片)

时间:2016-03-14 19:44:54

标签: html5 css3 twitter-bootstrap-3

我已经包含了我正在尝试做的事情的图片。我已经尝试了很多事情但没有成功。需要将文本连续排在一行,并在其下方连续显示更多文本,但是当屏幕缩小时,一组文本需要在另一组文本下面。我附上了我正在尝试做的事情的图片enter image description here

<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">

测试     


                          12V     

</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>     

1 个答案:

答案 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>