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

Question

我的 View 中有一个渲染表单，我需要根据模型对其进行塑造。

这是我要遵循的模型(这是在移动设备上)

这是我在 View 中的实际布局

这是目前我认为的代码

<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，但我发现它有点吃力。

有什么好的建议或方法可以像我的模型一样实际使用而不使用太多像素或避免那种东西 -> margin-left: 20px?

(只需忽略 RÉSERVER 我真的尝试将我的表单放在中间，让元素大小相等)

谢谢

Answer 1

所以首先，如果您没有注意到您正在使用 Bootstrap。这意味着要在左侧和中间对齐你的两个主要 block ，你可以使用类:“col-md-*”。这是 Bootstrap 的基本网格概念。这是一个引用:w3schools

正确放置 block 后，您必须一起制作按钮和输入。通常称为“输入组”。您可以通过多种方式实现这一点，这里有一个引用:getbootstrap.com

然后对于您的按钮，您在 w3schools 上又有了一些很好的例子

完成后，您可能想知道可以使用 :

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

要了解 css 将哪些 html 元素视为Block 或Inline 元素，再次引用:w3schools

为此，您可能希望将标签和输入的宽度固定为相同的值。

我让你不仅仅是一个例子，我的不好，但它是: JsFiddle