Jquery 引导响应网格不工作

我正在尝试使用引导网格系统在手机屏幕上设置文本框，但是所有的东西都相互重叠，这就是我遇到的问题。 我努力了好几个小时，如果有任何帮助，我将不胜感激

表单按钮重叠。在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>

---

最后一次输入是网格中的nt

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

--------


+
-------

最后一次输入是网格中的nt

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

--------


+
-------

我想我知道发生了什么。试试这个。也不需要定制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>

--------
+
--------

---

做了一次编辑

我想我知道发生了什么。试试这个。也不需要定制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>

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

--------
+
--------

进行编辑

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

.左{
背景：#147cc4；
显示：块；
}
.对{
显示：块；
背景：#ffcc00；
}
.表格组{
利润率：15px 0px；
填充：15px 0px；
}
.submitbtn{
边缘顶部：20px；
}
#加上#巴{
字体大小：20px；
}
--------
+
-------

.左{
背景：#147cc4；
显示：块；
}
.对{
显示：块；
背景：#ffcc00；
}
.表格组{
利润率：15px 0px；
填充：15px 0px；
}
.submitbtn{
边缘顶部：20px；
}
#加上#巴{
字体大小：20px；
}
--------
+
-------

---

当使用您的代码时，我得到以下结果似乎对我的代码有效？我附上了一个屏幕截图，显示了我遇到的问题@LukasGjetting@LukasGjetting在移动模式下检查，使用代码时重叠，我得到以下结果似乎对我的工作？我附上了一个屏幕截图我有什么问题@LukasGjetting@LukasGjetting在移动模式下检查它是否重叠。首先，您的代码是否已被识别。。第二个是您为输入添加了div。。。你确定你的代码是正确的吗？我已经在不同的地方尝试过这些布局，它们正在工作，但在这个版本中不工作！第一个是您的代码被简单识别。。第二个是您为输入添加了div。。。你确定你的代码是正确的吗？我已经在不同的地方尝试过这些布局，它们正在工作，但在这个版本中不工作！我已经修改了你的代码。试着用这个。。这应该可以正常工作。我已经修改了你的代码。试着用这个。。这应该很好用。