Html div标签不'；如果页面被放大或缩小，则不能保持固定

我有一个引导模板html代码：

<section id="main-content">
  <section class="wrapper">
    <h3><i class="fa fa-angle-right"></i>Create New Space Marine Chapter</h3>       
      <div class="row mt" >
          <div class="col-md-12" >
              <div class="content-panel" >
              <form class="form-inline" action="add.php" method="POST">
                <div class="row">
                    <div class="form-group col-lg-5" style='float:initial;width:680px;height:240px'>
                        <div class="form-group col-lg-4">
                            <label for="id">ID:</label> 
                            <input class="form-control" type="text" name="ID" required="required" />
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="name">Name:</label> 
                            <input class="form-control" type="text" name="Name" required="required"/>
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="founding">Founding:</label> 
                            <input class="form-control" type="text" name="Founding" required="required"/>
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="successor_of">Successor Of:</label> 
                            <input class="form-control" type="text" name="Successor_Of" required="required"/>
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="successor_chapters">Successor Chapters:</label> 
                            <input class="form-control" type="text" name="Successor_Chapters" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="number">Number:</label> 
                            <input class="form-control" type="text" name="Number" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="primarch">Primarch:</label> 
                            <input class="form-control" type="text" name="Primarch" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="chapter_master">Chapter Master:</label> 
                            <input class="form-control" type="text" name="Chapter_Master" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="homeworld">Homeworld:</label> 
                            <input class="form-control" type="text" name="Homeworld" required="required"/>
                        </div>  
                        <div class="form-group col-lg-4">
                            <label for="allegiance">Allegiance:</label> 
                            <input class="form-control" type="text" name="Allegiance" required="required"/>
                        </div>   
                        <div class="form-group col-lg-4">
                            <label for="colors">Colors:</label> 
                            <input class="form-control" type="text" name="Colors" required="required"/>
                        </div>                                                              
                    </div>                                                        
                </div>  
                <br>                          
                <div class="form-group col-md-1 ">
                    <button onclick="showAddRecordDiv()" type="submit" class="btn btn-default">Create</button>
                </div>                            
              </form>                                                                                              
                <form action="javascript:getLastRecord();" method="GET">
                    <div class="form-group col-md-2">
                        <button type="submit" class="btn btn-default">Show Last Created</button>
                    </div>
                </form>                                        
                <form action="javascript:getAllRecords();" method="GET">
                    
                    <div class="form-group col-lg-1">
                        <button type="submit" class="btn btn-default">Show All</button>
                    </div> 
                                                  
                </form>
                  <table id="advanced-table" class="table table-striped table-advance table-hover">                   
                      <thead>
                      <tr>
                            <th style="text-align:center" width="50">ID</th>
                            <th style="text-align:center" width="100">Name</th>
                            <th style="text-align:center" >Founding</th>
                            <th style="text-align:center" width="150">Successor Of</th>
                            <th style="text-align:center" width="200" >Successor Chapters</th>
                            <th style="text-align:center" >Number</th>
                            <th style="text-align:center" >Primarch</th>
                            <th style="text-align:center" width="200" >Chapter Master</th>
                            <th style="text-align:center" >Homeworld</th>
                            <th style="text-align:center" >Allegiance</th>
                            <th style="text-align:center" >Colors</th>
                            <th style="text-align:center" width="100" >Input Date</th>
                            <th style="text-align:center" >Delete</th>
                      </tr>
                      </thead>   
                      <tbody>
                      </tbody>                          
                  </table>
                  <div id="alert-div" class="alert alert-danger" hidden="hidden">
                        <strong>RECORD DELETED</strong>                           
                        </div>  
                  <div id="add-record-div" class="alert alert-success" hidden="hidden">
                        <strong>CHAPTER CREATED</strong>    
                  </div>
              </div><!-- /content-panel -->
          </div><!-- /col-md-12 -->
      </div><!-- /row -->
</section><! --/wrapper -->
</section><!-- /MAIN CONTENT -->

创建新的太空海洋章节
身份证件：
姓名：
成立：
继承人：
后续章节：
编号：
元老院：
主章：
故乡：
忠诚：
颜色：


创造
显示上次创建的
全部展示
身份证件
名称
成立的
继承人
后续章节
数
基因原体
章主
故乡
忠诚
颜色
输入日期
删除
记录已删除
创建章节

我的问题是当我放大或缩小页面时，所有div的位置都会发生变化，页面的布局也会发生变化。以下是一些例子： 大小为33%的页面：

大小为100%的页面：

大小为175%的页面：

---

我在网上搜索，发现我必须将div的大小设置为固定/静态。我做了一些浮动和宽度高度，但没有帮助。为了不破坏页面布局，我能做些什么？

@j08691我完全在使用引导css。这是一个引导页面，我只改变了颜色，一些样式，添加了一些javascript和按钮。你能给我们看看你的css代码吗。。。据你所说，我相信设置

display:block到您的
标记应修复problem@leo.fcx我想我做不到，因为它是引导式css，而且非常庞大。我正在使用“dashgum”引导模板。这里是链接，如果它有帮助，你可以从这里看：明白，但你试过我说的（卡斯顿css风格）。。类似这样：
.formgroup label{display:block；}
@leo.fcx Divs和buttons布局仍在50%以下和200%以上变化，但50%-200%之间的布局是相同的。这部分解决了问题，谢谢你！