响应的圈子与图像和文本

Question

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

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

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

以下是HTML＆amp; 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

您没有说明您希望在较小的视口上做什么。在这里它堆叠和居中，因为内容不能适合圆形而不是非常小而且在较小的视口上看起来不好看。

DEMO：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>

Answer 2

至于你的第一个问题，如果你想在一个单独的行上使用每个句子，请使用换行符<br />。

如果您只想要包装文本，请将文本放在<p>标记或<span>标记内，以便您可以定义宽度。这样它会在达到元素宽度时换行。