響應圈與圖像和文字

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

你沒有說你想要的東西要在更小的視口來完成。因爲內容不能很小而不能在一個小的視口上看起來不太好，所以它在這裏疊加和聚焦。

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>標籤內，以便您可以定義寬度。這樣它會在達到元素寬度時進行換行。