我已经开发了一个带有bootstrap的响应页面。在我的页面中,我有一个表单,其中订阅文本和提交按钮浮动。我已经尝试了很多,但是未能消除此问题。
我想要按钮并订阅下图所示的文本
result which i want
但低于768像素时,我得到的结果是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;
}
请帮我解决这个问题。在此处输入代码
最佳答案
尝试一下,我将重新构建您的代码结构以做出更好的响应设计。您可以使用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/