bootstrap form button und abonnieren para floatting ausgabe

Question

ich habe eine Responsive Seite mit bootstrap entwickelt. Auf meiner Seite habe ich ein Formular, wo der Subscribe-Text und der Submit-Button floaten. Ich habe viel versucht, aber ich kann dieses Problem nicht beheben. ich will buttn und abonnieren Text wie unten Bild result which i want

aber unter 768px ich dieses Ergebnis result which i am getting

HTML-Code bin immer: -

<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> 

und CSS ist: -

.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; 
} 

Bitte helfen Sie mir, dieses Problem zu lösen. Geben Sie den Code hier ein

Answer 1

Versuchen Sie dies, ich remake Ihre Code-Struktur, um besser responsive Design zu machen. Sie können das Formular mit CSS personalisieren.

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; 
} 

DEMO:

https://jsfiddle.net/tff6Lhxz/