根据您的需要以枝条形式移动元素 - Symfony 3

Question

我在视图中有一个渲染的表单，我需要对模型进行整形。

这是我将遵循的模拟（这是在移动设备上）

这是我在视图中的实际布局

这是我到目前为止的视图中的代码

<section class="restaurant__nav col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-3 well">
    <div class="container">
        {{ form_start(form) }}
            {{ form_widget(form) }}
            {% if app.user %}
                <input type="submit" value="{{ 'buy.field' |trans |upper }}">
            {% else %}
                {{ 'not_connected.text' |trans }}
            {% endif %}
        {{ form_end(form) }}
    </div>
</section>

所以我真的不喜欢sass（因为我正在使用它）和css。但我尝试margin每个元素，但我发现它有点挣扎。

任何好的建议或方法，实际上像我的模型一样，不使用太多像素或避免那种事情 - ＆gt; margin-left: 20px？

（只是忽略RÉSERVER我真的试图把我的形式放在中间，元素用于相等的尺寸）

谢谢

Answer 1

首先，如果您没有注意到您正在使用Bootstrap。 这意味着要在左侧和中间对齐两个主要块，您可以使用类：＆＃34; col-md - *＆＃34;。它是bootstrap的网格概念，基本的。 以下是参考：w3schools

正确放置块后，您必须同时按下并输入。通常称为＆＃34;输入组＆＃34;。您可以通过多种方式实现此目的，这里有一个参考：getbootstrap.com

然后，对于您的按钮，您在w3schools

上再次提供了一些很好的示例

完成后，您可能想知道您可以将元素置于中心位置：

display: block; // if element isn't natively block
margin: auto;

要知道css将html元素视为阻止或内嵌元素，还有另一个引用：w3schools

要结束此操作，您可能希望修改标签的宽度并输入相同的值。

我让你不仅仅是一个例子，我的坏，但这里是： JsFiddle