我已经开发了一个带有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/

07-28 02:28
查看更多