Question

大家好，所以我试图让一些文字显示在我使用bootstrap版本3的图片下方

到目前为止我有：

Picture 
-Text

但到目前为止它并排出现，但我希望它出现在彼此之下所以顶部的图片然后是下面的文字，例如

{{1}}

谢谢

Answer 1

如果您希望文字位于图片下方，请不要将其放在单独的列中。

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3">
       <img alt="my image" class="img-about" src="Images/s1.fw.png"></div>
       <h2>aa</h2>
      <div class="col-md-3">
        // Use this for seconfd image in the right of the 1st one.
      </div>
   </div>

Answer 2

如果您正在寻找不同的方法。 More

p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 1.1em;
  line-height: 1.5em;
  color: #666;
}

img {
  max-width: 100%;
  height: auto;
  margin: 5px 0 50px;
}

   

.grid {
  display: -webkit-flex;
  display: flex;
}

.col {
  padding: 30px;
}

.fluid-flex {
  -webkit-flex: 1;
  flex: 1;
  /* Not supported by Safari */
}

<div class="grid">
  <div class="col fluid-flex">
    <h1>My Image 1</h1>
    <img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
    <p>This was taken when i was in TX.
    </p>
  </div>
  <div class="col fluid-flex">
    <h1>My Image 2</h1>
    <img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
    <p>This was taken when i was in CA.
    </p>
  </div>
  <div class="col fluid-flex">
    <h1>My Image 3</h1>
    <img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
    <p>This was taken when i was in NY.
    </p>
  </div>

Answer 3

没有bootstrap：

.wrapper {
  width: 150px;
  border:1px solid #ccc;
  padding: 10px;
}  

img {
 width: 100%;
 border: 1px solid #ccc;
 padding: 2px;
}  

h2 {
  text-align: center;
}

<div class="wrapper">
  <img alt="my image" class="img-about" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
  <h2>Some Text</h2>
</div>

让文字显示在图片下方

3 个答案: