Question

我试图创建一个订阅底部，允许客户输入他们的电子邮件，如图片https://imgur.com/a/PIB87ng

所示

      <div class="signup text-center">
          <h4>JOIN OUR MAILING LIST!</h4>
              <input type="email" id="myEmail" value="enter your email">
              <button onclick="myFunction()" class="btn btn-light-orange btn-sign">SUBSCRIBE</button> 




         .btn.btn-sign{
          padding: 1px 15px;

          border-radius: 0;
          font-family: 'Open Sans', sans-serif;
          font-size: 20px;
          font-weight: 600;

Answer 1

假设您正在使用Bootstrap 4.X ，如果您创建围绕<div class="input-group">和input的{{1}}，则会创建你想要的结果。

<强> HTML：

button

CSS： 此处未发生任何变更

<div class="signup text-center">
     <h4>JOIN OUR MAILING LIST!</h4>
     <div class="input-group justify-content-center">
         <input type="email" id="myEmail" value="enter your email">
         <button onclick="myFunction()" class="btn btn-light-orange btn-sign">SUBSCRIBE</button>
     </div>
</div>

Link到Bootstrap的.btn.btn-sign{ padding: 1px 15px; border-radius: 0; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; }

按钮插件示例如果你需要，

Here是一个JSFiddle示例

使用bootstap

1 个答案: