ブートストラップフォームボタンとサブフロート浮動小数点問題

Question

私はブートストラップを備えたレスポンシブページを開発しました。私のページには、サブスクライブテキストとサブミットボタンがフロートしているフォームがあります。私はたくさん試しましたが、私はこの問題を取り除くことに失敗しています。 私は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; 
} 

DEMO：

https://jsfiddle.net/tff6Lhxz/