时间戳

首页 > 解决方案 > 圆形的圆圈，即一个圆圈中有 6 个圆圈

javascript - 圆形的圆圈，即一个圆圈中有 6 个圆圈

问题描述

在这里，我尝试使用 bootstrap、CSS 和 HTML5 以圆形显示按钮。我想要它是精确的圆形。朋友，能不能修一下。请尝试帮助我，我也希望它响应。下面是我的代码，请仔细阅读。在这里，我尝试使用 bootstrap、CSS 和 HTML5 以圆形显示按钮。

    <div class="col-md-12">

        <div class="row" align="center">

        <div class="col-md-6">
            <button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Product
              identification</i></button>
        </div>



<div class="col-md-6">
        <button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
    </div>

    </div>

   </div>  

   <div class="col-md-12">

      <div class="row" align="center">

      <div class="col-md-6">

      </div>

      <div class="col-md-6">
          <button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Cataloguing, listing <br> and pricing</i></button>
      </div>

      </div>

     </div> 

   <div class="col-md-12">

    <div class="row" align="center">

      <div class="col-md-4">
          <button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Front ending <br> end customers</i></button>
      </div>

      <div class="col-md-4">
          <button type="button" class="btn btn-info btn-circle btn-xl"><i class="" style="font-size:17px;"><b>ZRPL</b></i></button>
      </div>

      <div class="col-md-4">
          <button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Enhance product <br> visibility and deals</i></button>
      </div>

      </div>

     </div> 

     <div class="col-md-12">

      <div class="row" align="center">

        <div class="col-md-6">
            <button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Returns and ARB management</i></button>
        </div>

        <div class="col-md-6">
            <button type="button" class="btn btn-info btn-circle btn-xl"><i class="">Logistical
              support</i></button>
        </div>

        </div>

       </div>

标签： javascripthtmlcsshtml5-canvasbootstrap-4

解决方案

在您的按钮中添加此 CSS 样式。它会在你的按钮上形成一个圆形。你可以在你的按钮上width给出任何值。height只要确保高度和宽度应该具有相同的值。

width:170px;
height:170px;
border-radius:50%

推荐阅读