使用 Bootstrap 偏移类是居中元素的正确方法吗? [英] Is using Bootstrap offset classes a correct method for centering elements?

问题描述

我试图将 Bootstrap 表单居中，实际上有 .form-inline.我想将它居中并使用 Bootstrap 类，在这种情况下是 offset 类.

我创建了一个 div，它把 .container 作为类，所以我在里面标记了正确的 <div class="row">然后(这是要问的时候):

或

或

或

终于

我尝试了所有这些，我写的粗体是哪个效果更好，我的问题是，我的方法好吗?有没有其他班级声明把这个放在中心?

这是我的整个降价:

<h1>Solución de ecuaciones lineales.</h1><h3>Elige un método y el número <i>n</i>de ecuaciones e incógnitas</h3><div class="row"><div class="col-xs-4 col-xs-offset-4"><form class="form-inline" role="form" id="argumentos"><div class="btn-group" data-toggle="buttons"><label class="btn btn-default"><input type="radio" name="options" id="btnGauss">高斯<label class="btn btn-default"><input type="radio" name="options" id="btnGaussJordan">高斯乔丹<label class="btn btn-default"><input type="radio" name="options" id="btnMatrizInversa">逆矩阵
<input type="text" class="form-control input-mini" placeholder="n" id="input-n"></表单>

解决方案

是的，这就是它的目的.基本的经验法则是将类设置为col-lg-X col-lg-offset-((12-X)/2)，如果你想居中.但是，您需要在编写页面时手动评估算术或将其编写脚本.您不能将 ((X-12)/2) 放入类中，例如, 一个

.

Bootstrap 使用网格系统.如果您不喜欢他们的实现方式，您可以随时查看其他基于网格的系统，例如 unsemantic.

I tried to center a Bootstrap form, actually having .form-inline. I wanted to center it and use Bootstrap classes, offset ones in this case.

I created a div which got .container as class, so within I marked down the proper <div class="row"> and then(this is when it comes to ask):

<div class="col-xs-10 col-xs-offset-1">

or

<div class="col-xs-8 col-xs-offset-2">

or

<div class="col-xs-6 col-xs-offset-3">

or

<div class="col-xs-4 col-xs-offset-4">

finally

<div class="col-xs-2 col-xs-offset-5">

I tried with all these and the one I wrote bold is which worked better, my question is, is my aproach ok? Is there any other class which states put this centered?

This is my whole markdown:

<div class="container">

    <h1>Solución de ecuaciones lineales.</h1>
    <h3>Elige un método y el número <i>n</i> de ecuaciones e incógnitas</h3>

    <div class="row">

        <div class="col-xs-4 col-xs-offset-4">

            <form class="form-inline" role="form" id="argumentos">

                <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-default">
                    <input type="radio" name="options" id="btnGauss"> Gauss
                  </label>
                  <label class="btn btn-default">
                    <input type="radio" name="options" id="btnGaussJordan"> Gauss Jordan
                  </label>
                  <label class="btn btn-default">
                    <input type="radio" name="options" id="btnMatrizInversa"> Matriz Inversa
                  </label>
                </div>

                <input type="text" class="form-control input-mini" placeholder="n" id="input-n">

            </form>

        </div>
    </div>
</div>

解决方案

Yes, that's how it's intended to be done. The basic rule of thumb is that you set the class to col-lg-X col-lg-offset-((12-X)/2), if you want to center it. You will, however, need to either manually evaluate the arithmetic as you write the page or have it scripted in. You can't put ((X-12)/2) into the class of, say, a <div>.

Bootstrap uses the grid system. If you don't like how they have implemented it, you can always look into other grid-based systems, e.g., unsemantic.

这篇关于使用 Bootstrap 偏移类是居中元素的正确方法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！