如何在移动设备中设置 html bootstrap 按钮响应

Question

我是新来的，所以如果我提到任何错误，我深表歉意。

我想让我的 bootstrap 按钮移动响应。但是，我是 CSS 的新手。我想在 video.so 之后在小型设备的屏幕中间显示我的按钮和文本，请告诉我怎么做。

这是我的 HTML 代码：

<div class="row" style="margin-top: 5%">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
    <p style="float: right; color: black;">I'm Ready to get my risk free <br /> membership today! <br /> (Limited Time and Quantities) </p>
  </div>
</div>
<div class="row">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
    <a href="#">
      <button class="btn btn-theme btn-sm" style="background: white;color: #404040">
        My Email Address
      </button> </a>
    <a href="#">
      <button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
        Keep me on your email list
      </button> </a>
    <a href="#">
      <button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;  float: right; color: black">
      Get My Risk <br /> Free Membership today
      </button> </a>
  </div>
</div>

Answer 1

您可以对其使用媒体查询或 bootstrap 4 classes.

这里是 link bootstrap class： https://getbootstrap.com/docs/4.0/utilities/display/

@media (max-width: 575px){
        p{
            text-align: center;
            float: unset !important;
        }
        a {
            display: flex;
            justify-content: center;
            margin-bottom: 15px;
        }
    }



<div class="row" style="margin-top: 5%">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
          <p style="float: right; color: black;">I'm Ready to get my risk free  <br /> membership today! <br />
          (Limited Time and Quantities) </p>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
          <a href="#"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
            My Email Address
          </button> </a>
          <a href="#"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
            Keep me on your email list
          </button> </a>
          <a href="#"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;  float: right; color: black">
            Get My Risk <br /> Free Membership today
          </button> </a>
        </div>
      </div>

Answer 2

这是代码。希望它能帮助你。我在 p 和标签中添加了一些类。即使我把 css 用于移动视图。如果有任何变化，请告诉我。

@media screen and (max-width: 767px) {
  .email-wrap {
    display: block;
    margin-bottom: 20px;
    text-align: center;
  }

  .text-wrap {
    text-align: center;
  }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <p class="text-wrap">I'm Ready to get my risk free <br /> membership today! <br />
      (Limited Time and Quantities) </p>
  </div>
</div>

  <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: white;color: #404040">
        My Email Address
      </button> </a>
    <a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: #404040; border-radius: 10px; color: white">
        Keep me on your email list
      </button> </a>
    <a href="#" class="email-wrap"><button class="btn btn-theme btn-sm" style="background: yellow; border-radius: 10px;color: black">
        Get My Risk <br /> Free Membership today
      </button> </a>

</div>

如何在移动设备中设置 html bootstrap 按钮响应

how to set the html bootstrap buttons responsive in mobile

html

css

twitter-bootstrap

responsive