Question

我正在尝试使用Bootstrap网格系统在移动显示器上设置文本框但是所有的东西都相互重叠，这就是我遇到的问题。我想要花很多时间来感谢任何帮助！

表单按钮重叠。而div的右侧也有问题

这是我的代码

<form method="POST">
<div class="col-md-12">
<div class="col-md-4 left">
<input type="text" class="one" id="one"/>
<div id="bar">--------</div>
<input type="text" class="two" id="two" /><br/>

</div>
<div class="col-md-4 text-center">
<div class="text-center">+</div>
</div>
<div class="col-md-4 right">
    <input type="text" class="three"id="three" />
<div id="bar">-------</div>
<input type="text" class="four"id="four" /><br/>

</div>
</div>
<input type="submit" class="btn" id="btn" name="btn" value="Get Answer"/>
</form>

CSS是

    .left{
        float:left;
        background:#147cc4;
    }
    .right{
        float:right;
        background:#ffcc00;
    }


#plus,#bar{
    font-size:20px;
}


.col-centered{
float:none;
margin:0 auto;
}

Answer 1

我想我得到了正在发生的事情。试试这个。也不需要你的自定义CSS。

<div class="container">

   <form method="post">
       <div class="row">
           <div class="col-xs-4"><input type="text" class="one" id="one" /></div>
           <div class="col-xs-4"></div>
           <div class="col-xs-4"><input type="text" class="three" id="three" /></div>
       </div>
       <div class="row">
           <div class="col-xs-4"><div id="bar">--------</div></div>
           <div class="col-xs-4">+</div>
           <div class="col-xs-4"><div id="bar">--------</div></div>
       </div>
       <div class="row">
           <div class="col-xs-4"><input type="text" class="two" id="two" /></div>
           <div class="col-xs-4"></div>
           <div class="col-xs-4"><input type="text" class="four" id="four" /></div>
       </div>
       <input type="submit" class="btn" id="btn" name="btn" value="Get Answer" />
   </form>

</div>

进行了编辑

Answer 2

你的最后一个输入是网格中的

<form method="POST">
    <div class="col-md-12">
        <div class="col-md-4 left">
            <input type="text" class="one" id="one"/>
            <div id="bar">--------</div>
            <input type="text" class="two" id="two" /><br/>

        </div>
        <div class="col-md-4 text-center">
            <div class="text-center">+</div>
        </div>
        <div class="col-md-4 right">
            <input type="text" class="three"id="three" />
            <div id="bar">-------</div>
            <input type="text" class="four"id="four" /><br/>

        </div>
    </div>
    <input type="submit" class="btn" id="btn" name="btn" value="Get Answer"/>
</form>

尝试将最后一个输入放在网格中，例如：

<form method="POST">
    <div class="col-md-12">
        <div class="col-md-4 left">
            <input type="text" class="one" id="one"/>
            <div id="bar">--------</div>
            <input type="text" class="two" id="two" /><br/>

        </div>
        <div class="col-md-4 text-center">
            <div class="text-center">+</div>
        </div>
        <div class="col-md-4 right">
            <input type="text" class="three"id="three" />
            <div id="bar">-------</div>
            <input type="text" class="four"id="four" /><br/>

        </div>
    </div>
    <div class="col-md-12">
        <input type="submit" class="btn" id="btn" name="btn" value="Get Answer"/>
    </div>
</form>

Answer 3

<!DOCTYPE html>
<html>

<head>
 <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
 <style>

.left {
 background: #147cc4;
 display: block;
}
.right {
 display: block;
 background: #ffcc00;
 }
.form-group {
  margin: 15px 0px;
  padding: 15px 0px;
}
.submitbtn {
 margin-top: 20px;
}
#plus,#bar {
 font-size: 20px;
}
</style>
</head>

<body>
 <form method="POST">
   <div class="col-md-12">
    <div class="col-sm-4 left">
     <div class="form-group">
      <input type="text" class="one form-control" id="one" />
      <div id="bar">--------</div>
      <input type="text" class="two form-control" id="two" />
      </div>
     </div>
     <div class="col-sm-4 text-center">
      <div class="text-center">+</div>
     </div>
     <div class="col-sm-4 right">
       <div class="form-group">
        <input type="text" class="three form-control" id="three" />
        <div id="bar">-------</div>
        <input type="text" class="four form-control" id="four" />
        </div>
       </div>
      <div class="clearfix">
      <input type="submit" class="btn text-center submitbtn" id="btn" name="btn" value="Get Answer" />
      </div>
      </div>
  </form>
</body>

Bootstrap响应网格无法正常工作

3 个答案: