Html 启动和css后按钮不对齐

我创建了一个主菜单，您可以在其中登录和注册。它是用引导、css和html创建的。除了这最后一点，一切都很顺利。每当我使网页全屏显示时，登录和注册按钮都会一直滑到一边。移动版不会这样做。 下面是一个JSFIDLE链接：

类btn登录和btn注册的按钮标签是我关心的，它们只是没有在中心对齐

<button type="submit" class="btn btn-primary-login col-sm-offset-4 col-sm-4 btn-login" value="Log In">Log in</button>
            </div>
        </fieldset>
    </form>    

<div class="col-md-offset-2 col-md-8 text-center">
    <div class="container-fluid">       
        <div class="signup-form">
            <label class="create-label">Create an Account</label>
            <label class="or"><span>or</span></label>
        </div> <!-- signup-form -->
    </div> <!-- container-fluid -->
    <div class="container-fluid">
        <button class="btn btn-primary-login col-sm-offset-4 col-sm-4 btn-signup" ui-sref="signup">Sign Up Free</button>
    </div> <!-- container-fluid -->

在中，您可以找到以下层次结构：

列是行的唯一子级 行必须放置在容器或容器流体中 这意味着您必须使用以下内容：

   <div class="container">
      <div class="row">
        <div class="col-md-6"></div>
      </div>
    </div>

也不要在按钮类中使用col-*。你必须像上面的例子那样把它们分开

当我在您的项目中使用这些说明时，请按“登录”按钮返回中心位置：

<div class="row">
  <div class="col-sm-offset-4 col-sm-4">
    <button type="submit" class="btn btn-primary-login btn-login" value="Log In">Log in</button>
  </div>
</div>

---

您并没有按照预期的方式使用网格。如果您根据he使用：

你不会有任何问题，你的元素浮动的地方

工作示例：

@导入url'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'； 身体{ 背景色：d00025； 背景图片：url'https://unsplash.it/1200/900/?gravity=east'; 背景位置：顶部； 背景大小：50%； 背景重复：重复-x； 填充：0px； 边际：0px； 字体系列：“Candara”，无衬线； -webkit字体平滑：抗锯齿； } a{ 文字装饰：无； } .logo登录{ 顶部：30px； 左：50%； 转化：translateX-50%； 位置：绝对位置； 背景色：fff； 背景尺寸：170px自动； 背景重复：无重复； 高度：200px； 宽度：200px； 填充：0px； 边框：10px实心fff； 边界半径：5px； -webkit盒阴影：0px 6px 5px 0px rgba51,51,51,1； -moz盒阴影：0px 6px 5px 0px rgba51,51,51,1； 盒影：0px 6px 5px 0px rgba51,51,51,1； z指数：1； } .登入表格{ 顶部：90px； 位置：相对位置； 框大小：边框框； 保证金：25像素自动； 边缘底部：0px； 宽度：100%； 最大宽度：400px； 背景色：fff； 填充：100px 50px 50px 50px； -webkit盒阴影：0px 6px 5px 0px rgba51,51,51,1； -moz盒阴影：0px 6px 5px 0px rgba51,51,51,1； 盒影：0px 6px 5px 0px rgba51,51,51,1； } .报名表格{ 顶部：-40px； 位置：相对位置； 框大小：边框框； 保证金：25像素自动； 边缘底部：0px； 宽度：100%； 最大宽度：400px； 背景色：fff； 填充：50px 50px 50px 50px； -webkit盒阴影：0px 6px 5px 0px rgba51,51,51,1； -moz盒阴影：0px 6px 5px 0px rgba51,51,51,1； 盒影：0px 6px 5px 0px rgba51,51,51,1； z指数：-1； } h1{ 字体大小：粗体； 字体大小：35px； 文本对齐：居中； 保证金：50px自动50px自动； } .输入标签{ 浮动：左； 显示：块； 边缘底部：10px； 字体大小：20px； 字号：100； } .创建标签{ 文本对齐：居中； 边际下限：10px } .或{ 文本对齐：居中； 边缘底部：20px； 边缘顶部：100px； 宽度：100%； 边框底部：1px实心000； 线高：0.1米； } .小节>跨度{ 背景：fff； 填充：0 10px； } .或>跨度{ 背景：fff； 填充：0 10px； } .表格管制{ 背景色：eee； } .btn.btn-login{ 背景颜色：耐火砖； 字体系列：坎达拉； 字体大小：20px； 颜色：白色； 填充：10px； 边框：1px实心耐火砖； 边界半径：5px； 箱形阴影：2×4×4×330000； 宽度：200px； 保证金：自动； 利润上限：70像素； 显示：块； } .btn.btn-注册{ 背景颜色：耐火砖； 字体系列：坎达拉； 字体大小：20px； 颜色：白色； 填充：10px； 边框：1px实心耐火砖； 边界半径：5px； 箱形阴影：2×4×4×330000； 宽度：200px； 保证金：自动； 利润上限：-200px； 显示：块； } .社交媒体{ 文本对齐：居中； 位置：相对位置； 利润上限：-75px； } .btn.btn-facebook{ 边缘底部：60px； 左侧填充：30px； 背景图片：urlimg/fb.gif； 背景色：3b5998； 填充：0px； 边框：3倍实心fff； 边界半径：5px； -webkit盒阴影：0px 6px 5px 0px rgba51,51,51,1； -moz盒阴影：0px 6px 5px 0px rgba51,51,51,1； 盒影：0px 6px 5px 0px rgba51,51,51,1； 背景尺寸：包含； 背景重复：无重复； 高度：70像素； 宽度：70px； 颜色：fff； } .btn.btn-gmail{ 边缘底部：60px； 最高：50%； 右侧填充：30px； 背景图像：urlimg/g+.gif； 背景色：dc4a38； 填充：0px； 边框：3倍实心fff； 边界半径：5px； -webkit盒阴影：0px 6px 5px 0px rgba51,51,51,1； -moz盒阴影：0px 6px 5px 0px rgba51,51,51,1； 盒影：0px 6px 5px 0px rgba51,51,51,1； 背景尺寸：包含； 背景重复：无重复； 高度：70像素； 宽度：70px； 颜色：fff； } .btn.btn-primary-login{ 颜色：fff； 背景色：9e0b0f； 边界：无； 箱形阴影：2×4×4×330000； -webkit转换：所有.3s eas E -moz过渡：全部.3s轻松； -ms过渡：全部。3秒轻松； -o-过渡：全部3秒轻松； 过渡：全部。3秒轻松； } .btn.btn主登录名：悬停， .btn.btn主登录：活动， .btn.btn-primary-login.hover{ 背景色：84090D； 边界：无； 箱形阴影：2×4×4×330000； -webkit过渡：所有.3s轻松； -moz过渡：全部.3s轻松； -ms过渡：全部。3秒轻松； -o-过渡：全部3秒轻松； 过渡：全部。3秒轻松； } /*报名方式*/ .紫外线头{ 字体大小：粗体； 字体大小：35px； 浮动：左； 左侧填充：225px； } .副标题{ 浮动：左； 左侧填充：225px； 边缘底部：5px； 字号：100； 字体大小：15px； } .标志注册{ 位置：绝对位置； 保证金：50px 0px 0px 50px； 背景色：白色； 背景尺寸：170px自动； 背景重复：无重复； 高度：170px； 宽度：170px； 填充：0px； 边框：5px纯白； 盒影：1px 3px 2px灰色； z指数：1； } .注册标题{ 顶部：110px； 位置：相对位置； 框大小：边框框； 宽度：100%； 最大宽度：1000px； 溢出：隐藏； 背景色：fff； 填充：25px 50px 50px 50px； 箱形阴影：1px 5px 2px 330000； } .注册表格2{ 位置：相对位置； 框大小：边框框； 保证金：25像素自动； 边缘底部：0px； 宽度：100%； 最大宽度：1000px； 背景色：fff； 填充：50px 50px 50px 50px； 箱形阴影：1px 5px 2px 330000； z指数：1； 边缘底部：25px； } .btn.btn-facebook-signup{ 背景图片：urlimg/fb.gif； 背景色：3b5998； 填充：0px； 边框：3倍实心fff； 边界半径：5px； -webkit盒阴影：0px 2px 5px 0px rgba51,51,51,1； -moz盒阴影：0px 2px 5px 0px rgba51,51,51,1； 盒影：0px 2px 5px 0px rgba51,51,51,1； 保证金：自动； 背景尺寸：包含； 背景重复：无重复； 高度：50px； 宽度：250px； 左侧填充：40px； 字体大小：16px； 颜色：fff； } .btn.btn-gmail-signup{ 背景图像：urlimg/g+.gif； 背景色：dc4a38； 填充：0px； 边框：3倍实心fff； 边界半径：5px； -webkit盒阴影：0px 2px 5px 0px rgba51,51,51,1； -moz盒阴影：0px 2px 5px 0px rgba51,51,51,1； 盒影：0px 2px 5px 0px rgba51,51,51,1； 保证金：自动； 背景尺寸：包含； 背景重复：无重复； 高度：50px； 宽度：250px； 左侧填充：40px； 字体大小：16px； 颜色：fff； } .社会btn组{ 左侧填充：205px； } 输入[类型=收音机]{ 利润率：0 10px 0 10px； } 输入[类型=复选框]{ 右边距：20px； } .分节{ 文本对齐：居中； 边缘顶端：40px； 边缘底部：40px； 宽度：100%； 边框底部：1px实心000； 线高：0.1米； } .字段标签{ 浮动：左； 显示：块； 边缘底部：10px； 字体大小：15px； 字号：100； } .无线线路{ 边缘顶部：20px； } .用户类型{ 字体大小：75px； } .separator div：最后一个孩子{ 边缘底部：50px； } 联合志愿人员 用户名 暗语

---

您好，谢谢您的澄清：D我将尽我最大的努力确保我未来代码中的网格系统的顺序正确。

<div class="row">
  <div class="col-sm-offset-4 col-sm-4">
    <button type="submit" class="btn btn-primary-login btn-login" value="Log In">Log in</button>
  </div>
</div>

container
  row
    col-*-*