Question

我正在尝试将图片和文本放在bootstrap网格中。我有4列图片，我试图在右侧显示文字。

目前这是我正在使用的代码：

<div class="row">
 <div class="col-lg-1 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text">Some text</span>
  </div>
</div>
<div class="col-lg-1 col-lg-offset-2 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text">Some text</span>
  </div>
</div>
<div class="col-lg-1 col-lg-offset-2 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text">Some text</span>
  </div>
</div>
<div class="col-lg-1 col-lg-offset-2 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text">Some text</span>
  </div>
 </div>
</div>

图片位置正确但不知何故我无法将文字放在每张图片的右侧。

必须如下：| img | text | img | text | img | text | img | text

Answer 1

在span中尝试使用Pull-right类：

<div class="row">
 <div class="col-lg-1 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text pull-right">Some text</span>
  </div>
</div>
<div class="col-lg-1 col-lg-offset-2 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text pull-right">Some text</span>
  </div>
</div>
<div class="col-lg-1 col-lg-offset-2 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text pull-right">Some text</span>
  </div>
</div>
<div class="col-lg-1 col-lg-offset-2 hidden-md hidden-sm hidden-xs">
  <div class="holder">
    <img class="img" src="apple.png">   
    <span class="text pull-right">Some text</span>
  </div>
 </div>
</div>

Answer 2

<div class="row">
  <div class="col-lg-2 hidden-md hidden-sm hidden-xs">
    <div class="holder">
      <img class="img" src="apple.png">
      <span class="text">Some text</span> 
    </div>
  </div>
  <div class="col-lg-2 hidden-md hidden-sm hidden-xs">
    <div class="holder">
      <img class="img" src="apple.png">
      <span class="text">Some text</span> 
    </div>
  </div>
  <div class="col-lg-2 hidden-md hidden-sm hidden-xs">
    <div class="holder">
      <img class="img" src="apple.png">
      <span class="text">Some text</span> 
    </div>
  </div>
  <div class="col-lg-2 hidden-md hidden-sm hidden-xs">
    <div class="holder">
      <img class="img" src="apple.png">
      <span class="text">Some text</span> 
    </div>
  </div>
</div>

你试过这个吗？

bootstrap图片+文字定位？

2 个答案: