0

我有一个 div，我试图在其中放置一个按钮，它应该是响应式的。

将按钮放在里面工作正常，但问题是它没有响应，因为 div 相应地改变了它的大小。

<div className="mainDiv row">
     <div className="col-12 col-sm-12 col-md-3 col-lg-4 col-xl-4 mb-4">
        <div className="mt-5">
            <button className="btn testclass">
                <div className="showDot">top</div>
                <div className="someText">Middle</div>
            </button>
        </div>
    </div>
</div>

我的 CSS

.testclass {
border: 4px solid #727272 !important;
border-radius: 50% !important;
box-sizing: border-box;
background-color: red;

}

工作示例

.mainDiv {
  background-color: lightgreen !important;
  height: 300px
}

.testclass {
  border: 4px solid #727272 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv">
    <div class="mt-5">
      <button class="btn testclass">
         <div class="showDot">top</div>
         <div class="someText">Middle</div>
      </button>
    </div>
  </div>
</div>

我想要做的是在该容器的底部中心对齐那个圆形按钮，该按钮将在每个尺寸的中心（响应式）

4

5 回答 5

1

没有什么需要改变的。只需要添加几个引导类。我添加了三个类，如下所述 -

d-flex - 用于弹性盒

align-items-center - 垂直居中

justify-content-center - 水平居中

 <div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv 
  d-flex align-items-center justify-content-center">

mt-5还从子 div中删除类

于 2021-01-07T10:31:12.453 回答
0

工作示例，

.mainDiv {
  background-color: lightgreen !important;
  height: 300px
}

.testclass {
  border: 4px solid #727272 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  background-color: red;
}
.mt1-5{
   margin-top: 100px;
   text-align: center;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>

</style>
</head>
<body>
<div class="row">
  <div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv">
    <div class="mt1-5">
      <button class="btn testclass">
                            <div class="showDot">top</div>
                            <div class="someText">Middle</div>
                        </button>
    </div>
  </div>
</div>
</body>

添加这个，

.mt-5{
   margin-top: 100px;
   text-align: center;
}

删除 .mt-5 类中的 margin-top: 3rem !important 或创建一个新类。

于 2021-01-07T09:43:55.623 回答
0

尝试在您的 html 中执行此操作。在父元素上插入这个。

<div class="col-4 col-sm-4 col-md-2 col-lg-1 col-xl-4 mb-1 mainDiv" style="display: table;text-align: center;">

并在子元素上插入这个。

   <div class="" style=" display: table-cell;vertical-align: bottom;">

我已经尝试过您提供的片段，它就像一个魅力。

于 2021-01-07T09:50:56.057 回答
0

你必须做两件事：

第一的：

class="d-flex justify-content-center"

你应该把它放在mainDiv. 这应该将您的元素移动到页面的中心。

第二：

class="d-flex align-items-end"

你应该把它放在mainDiv. 这应该将您的元素移动到页面底部。

请记住，d-flex在每个元素类中只需要一次。

所以最后你应该写在名为的元素中mainDiv

class="d-flex justify-content-center align-items-end"
于 2021-01-07T09:51:22.660 回答
0

我假设您想将按钮对齐到 div 的中心

如果是，那么，您只需将其添加到.testclass

.testclass {
  border: 4px solid #727272 !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  background-color: red;
  
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

工作示例： https ://codepen.io/fasid/pen/bGwKvdy

我想要做的是在该容器的底部中心对齐那个圆形按钮，该按钮将在每个尺寸的中心（响应式）

尝试将上面更改top: 40%为top: 90%

于 2021-01-07T09:54:14.297 回答