3列の円と応答可能

-1

レイアウトのチュートリアルやサンプルコードがある場合、それぞれの下にテキストが並んでいる3つの円が並んでいるのが不思議です。また、それは反応的なので、それは1つの円だけ、その次のもののようにテキストが続きます。ありがとう3列の円と応答可能

2017-01-17 b_dejonge

ブートストラップに精通している場合は、このようなことを試すことができます。

<div class="row"> 
     <div class="col-sm-4"> 
     <div class="circle"></div> 
     <span>This is a text</span> 
     </div> 
     <div class="col-sm-4"> 
     <div class="circle"></div> 
     <span>This is a text</span> 
     </div> 
     <div class="col-sm-4"> 
     <div class="circle"></div> 
     <span>This is a text</span> 
     </div> 
    </div> 
    <style type="text/css"> 
     .circle{ 
     position: relative; 
     border-radius: 50%; 
     width: 100%; 
     height: auto; 
     padding-top: 100%; 
     background: black; 
     } 
    </style>

出典

2017-01-17 07:40:38

おそらく、ブートストラップライブラリを調べる必要があります。

<html> 
    <head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 
     <body> 
     <div class="row"> 
      <div class="col-md-4"> 
      <img src="yourcirclepicture.png" alt="circle"> 
      </div> 
      <div class="text"> 
      your text 
      </div> 
      <div class="col-md-4"> 
      <img src="yourcirclepicture.png" alt="circle"> 
      </div> 
      <div class="text"> 
      your text 
      </div> 
      <div class="col-md-4"> 
      <img src="yourcirclepicture.png" alt="circle"> 
      </div> 
      <div class="text"> 
      your text 
      </div> 
     </div> 
    </body> 
</html>

クラス行では、enoghスペースがある場合にどのコンテンツを1つの行に入れるべきかを識別します。ウィンドウが小さくなると、内容（各col-md-4）が互いに下に置かれます。

ブートストラップライブラリを含めることを忘れないでください。

すべてである必要があります。

出典

2017-01-17 07:43:26 Gabbax0r

答えて

関連する問題