引导响应网格不工作

我想使用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; 
}

来源

2016-06-12 mod geek

在使用你的代码，我得到以下结果https://gyazo.com/a43a64e1403b3deac83804021cedbfe2 似乎对我的工作吗？ –

我附上了一个屏幕截图，我有什么问题@LukasGjetting –

@LukasGjetting检查在移动模式下它是重叠的 –

我想我会发生什么事情。尝试这个。也无需您的自定义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>

做了编辑

来源

2016-06-12 18:34:53

你最后的输入是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>

来源

2016-06-12 18:24:59 scaisEdge

代码不工作的兄弟！ –

第一个是你的代码只是想法..第二个是你的代码添加了输入div ...你确定你的代码是正确的？ – scaisEdge

我已经尝试过这些布局，他们正在工作的不同地方，但不是在这个senerio工作！ –

<!DOCTYPE html> 
<html> 

<head> 
<link data-require="[email protected]" 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>

来源

2016-06-12 18:47:46

我修改了你的代码。尝试使用这..这应该工作得很好。 –

引导响应网格不工作

回答

相关问题