如何使用：Bootstrap，React，MitalueUI的圆圈内上载按钮的设计？

发布于 2025-02-11 04:24:16 字数 563 浏览 2 评论 0原文

这就是必须的样子：

<div class="container ">
    <div class="row mx-auto">
        <div class="col ">
            <span class="border border-success rounded-circle">
                <button class="btnUpload">
                    <i class="fa fa-upload"></i> Upload
                </button>
            </span>
        </div>
    </div>
</div>

原文

This is how It must looks like:

here is the image , circle is a place where phtoto must be uploaded

<div class="container ">
    <div class="row mx-auto">
        <div class="col ">
            <span class="border border-success rounded-circle">
                <button class="btnUpload">
                    <i class="fa fa-upload"></i> Upload
                </button>
            </span>
        </div>
    </div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

埋葬我深情 2025-02-18 04:24:16

首先：与React一起使用时，请使用“ className”而不是“类”。对于您的问题：跨度是一个内联元素，没有边框。通过将显示器设置为阻止或使用DIV元素，将其转变为块元素。然后在其内部垂直和水平的中心按钮，例如使用Flexbox：

<div
  className="border border-success rounded-circle"
  style={{ width: 100, height: 100, margin: 50 }}
>
  <div className="h-100 d-flex justify-content-center align-items-center">
    <button className="btnUpload">
      <i class="fa fa-upload"></i> Upload
    </button>
  </div>
</div>

https：//codesandbox.io of /s/white-http-wsy881

First of all: use "className" instead of "class" when working with react. To your problem: span is an inline element and doesn't have border. Turn it into a block element by setting display to block or use div element instead. Then center button vertically and horizontally inside of it, for example with flexbox:

<div
  className="border border-success rounded-circle"
  style={{ width: 100, height: 100, margin: 50 }}
>
  <div className="h-100 d-flex justify-content-center align-items-center">
    <button className="btnUpload">
      <i class="fa fa-upload"></i> Upload
    </button>
  </div>
</div>

https://codesandbox.io/s/white-http-wsy881

回复收藏 0 原文

~没有更多了~