html - 引导表单按钮和订阅 float 问题

Question

我已经开发了一个带有 bootstrap 的响应式页面。在我的页面中，我有一个表单，其中订阅文本和提交按钮是 float 的。我已经尝试了很多，但我无法解决这个问题。 我想要 buttn 并订阅如下图所示的文字 result which i want

但低于 768px 我得到这个结果 result which i am getting

HTML 代码:-

    <div class="fromdiv">
<form>
<input class ="col-sm-7 col-md-7 col-lg-8 Frominput" type="Name" type="text" placeholder="First Name" required>
<input class ="col-sm-7 col-md-7 col-lg-8 Frominput2" type="Name" type="text" placeholder="Last Name" required>
<input class ="col-sm-7 col-md-7 col-lg-8 Frominput3" type="Email" type="Email" placeholder="Email Address" required> </br>
<div class="col-md-12 col-lg-12 subscribesubmit">
 <img class ="img-responsive Fromsubscribe" src="HomeImage\subscribe.png"/>
<p class ="col-md-6 col-lg-5 FromsubscribeSpan"> Safe Unsubscribe </p>
<button class=" col-xs-6 col-sm-6 col-md-4 col-lg-2 btn btn-primary Submit_Button"> Submit </button>
</div>
</form>
</div>

css 是:-

.Frominput,.Frominput2,.Frominput3
{       
    margin-left: 19.5%;
    height:43px;
    font-size: 15px;
    font-family: Lato-Light;
    float:left;
}

.Frominput2,.Frominput3
{
    margin-top:18px;
}


:placeholder-shown 
{
  font-size:18px;
  font-family:Lato-Regular;
  padding-left: 2%;
}
.Fromsubscribe
{
    margin-top: 186px;
    font-size: 15px;
    font-family: Lato-Light;
    clear:both;
}
.FromsubscribeSpan
{
    font-size: 15px;
    font-family: Lato-Light;
    margin-top:-4%;
    margin-left:0.5%;
    clear:both;

}

.Submit_Button
{
    width:100px;
    height:40px;
    background-color:#58A6CA;
    color: white;
    padding: 6px 0px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight:Bold;
    cursor: pointer;
    outline-style:none;
    border:none;
    text-align:center;
    font-family:Lato-Hairline;
    margin-left: 68.5%;
    margin-top: -6%;
    position:relative;
    display:inline-block;
    clear:both;
}

请帮我解决这个问题。在这里输入代码

Answer 1

试试这个，我会重新构建您的代码结构以实现更好的响应式设计。您可以使用 CSS 对表单进行个性化设置。

HTML:

<div class="container form-container">
  <form>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="First Name" required>
    </div>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Last Name" required>
    </div>
    <div class="form-group">
      <input type="email" class="form-control" placeholder="Email Address" required>
    </div>
    <div class="left-info">
      <img class="img-responsive Fromsubscribe" src="HomeImage\subscribe.png" />
      <p>Safe Unsubscribe </p>
    </div>
    <div class="right-info">
      <button type="submit" class="btn btn-primary Submit_Button">Submit</button>
    </div>
  </form>
</div>

CSS:

.left-info {
  display: flex;
  float: left;
}

.right-info {
  float: right;
}

.Submit_Button {
  width: 100px;
  height: 40px;
  background-color: #58A6CA;
  color: white;
  padding: 6px 0px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: Bold;
  cursor: pointer;
  border: none;
  text-align: center;
  font-family: Lato-Hairline;
  clear: both;
}

演示:

https://jsfiddle.net/tff6Lhxz/