响应的圈子与图像和文本

Question

我正在尝试使用嵌入式徽标和文本构建以下圈子.我一直在使用Bootstrap来提供响应能力,这篇文章也需要效仿.我目前遇到了几个问题:

1)文本保持在1行,并且当有多个句子时不会换行

2)无法嵌入必要的徽标或按钮

以下是HTML和CSS

    .circle {
      width: 100%;
      border-radius: 50%;
      text-align: center;
      font-size: 12px;
      padding: 50% 0;
      line-height: 0;
      position: relative;
      background: #38a9e4;
      color: white;
      font-family: Helvetica, Arial Black, sans;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <div class="circle">
      Text text text
    </div>
  </div>
</div>

Answer 1

你没有说明你想要在较小的视口上做什么.在这里它堆叠和居中,因为内容不能适合圆形而不是非常小并且在较小的视口上看起来不好看.

演示:http://jsbin.com/duveli/1/

CSS:

body {
    background: #777;
    padding: 5% 0;
}

.feature {background:pink;padding:10% 0}
.circle .btn {
    border-radius: 40px;
    background: #000;
    border: #000;
}
.circle {
    width: 100%;
    padding: 10%;
    background: white;
    border-radius: 50px;
}
.circle-wrapper {
    margin: 0 5%;
    position: relative;
}
.circle .list-inline {
    font-size: 0px;
    margin: 0;
}
.circle .list-inline li {
    font-size: 20px;
    display: block;
}
.circle p {
    padding-top: 10%;
    margin: 0;
}
@media (min-width:460px) { 
    .circle .list-inline li {
        font-size: 50px;
        display: inline-block;
    }
    .circle-wrapper {
        max-width: 450px;
        position: relative;
        margin:0 auto;
    }
    .circle {
        height: 0px;
        padding: 50%;
        border-radius: 50%;
    }
    .circle > div {
        position: absolute;
        text-align: center;
        left: 10%;
        right: 10%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top:20%\9; /* ie8 hack test this out it's a guess */
    }
}

HTML:

<section class="feature">

<div class="circle-wrapper">
   <div class="circle text-center">
      <div>
         <ul class="list-inline">
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+1" alt=""></li>
            <li class="plus">+</li>
            <li><img src="http://placehold.it/100x100/OOO/FFFFFF&text=image+2" alt=""></li>
         </ul>
         <p>content goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes herecontent goes here goes herecontent goes herecontent goes here</p>
         <p><a href="#" class="btn btn-primary">Button Goes Here</a></p>
      </div>
   </div>
</div>


</section>