Question

如何使用切除引导类

水平居中我的主容器

这是容器：

<div class="container-fluid main-container">
        <div class="col-md-10 content">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Edit existing questions 
                </div>
                <div class="panel-body">
                </div>
            </div>
        </div>
    </div>

The way it looks now

Answer 1

您可以使用解决方案https://jsfiddle.net/w4gLtcz5/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-container">
   <div class="row">
     <div class="col-md-offset-1 col-md-10 content">
       <div class="panel panel-default">
          <div class="panel-heading">
             Edit existing questions 
          </div>
          <div class="panel-body"></div>
       </div>
    </div>
  </div>
</div>

在 bootstrap 中，默认， 12列。

由于您的容器占据12列中的10列，因此从2列而不是第1列启动容器。因此，在容器的两侧，您将拥有相等的空间。

我认为 col-md-10 是您的列数

我添加了 col-md-offset-1 。

Answer 2

请使用 col-xs-offset-x 您可以在1到12之间写入数字而不是x。

使用.col-md-offset- *类向右移动列。这些类通过*列增加列的左边距：

您的代码将是。

<div class="container-fluid main-container">
    <div class="col-md-10 content col-xs-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">
                Edit existing questions 
            </div>
            <div class="panel-body">
            </div>
        </div>
    </div>
</div>

参考链接https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

将自举容器 - 液体水平居中

2 个答案: