對齊表格行

Question

我購買了具有Materialize設計的主題，並且希望表單如下所示：

目前的形式

到目前為止還可以。 但是，如果仔細觀察，您會發現兩個（主要形式）列之間存在間隙。 這是HTML：

<form role="form" method="POST" action="{{ route('company.register') }}">
                {{ csrf_field() }}
                <div class="row">
                    <div class="input-field col s6">
                        <select name="legal_form" id="legal_form" class="basic-select" onchange="changeLegalForm()">
                            <option value="" disabled="disabled" selected="selected">Bitte wählen Sie eine Rechtsform
                            </option>
                            <option value="1">Selbstständiger</option>
                            <option value="2">Einzelunternehmer</option>
                            <option value="3">Personengesellschaft (GbR/OHG/KG)</option>
                            <option value="4">Kapitalgesellschaft (GmbH/UG/Ltd./...)</option>
                            <option value="5">Verein</option>
                        </select>
                        <label for="legal_form">Rechtsform</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" name="company_name" id="company_name" placeholder="Unternehmensname"
                               class="validate" required>
                        <label for="company_name" class="active">Unternehmensname</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="email" name="email" id="email" placeholder="E-Mail-Adresse" class="validate"
                               required>
                        <label for="email" class="active">E-Mail-Adresse</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="checkbox" id="sbr" name="sbr">
                        <label for="sbr">Kleinunternehmerregelung</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="address" id="address" placeholder="Anschrift" class="validate"
                               required>
                        <label for="address" class="active">Anschrift</label>
                    </div>
                    <div class="col s6">
                        <div class="input-field col s6">
                            <input type="text" name="zip" id="zip" pattern="[0-9]{5}" placeholder="Postleitzahl"
                                   class="validate" required>
                            <label for="zip" class="active">Postleitzahl</label>
                        </div>
                        <div class="input-field col s6">
                            <input type="text" name="city" id="city" placeholder="Stadt" class="validate">
                            <label for="city" class="active">Stadt</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="phone" id="phone" placeholder="Telefonnummer" class="validate"
                               required>
                        <label for="phone" class="active">Telefonnummer</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" name="fax" id="fax" placeholder="Telefaxnummer" class="validate">
                        <label for="fax" class="active">Telefaxnummer</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="bank_name" id="bank_name" placeholder="Name der Bank"
                               class="validate" required>
                        <label for="bank_name" class="active">Name der Bank</label>
                    </div>
                    <div class="col s6">
                        <div class="input-field col s8">
                            <input type="text" name="iban" id="iban" placeholder="IBAN" class="validate" required>
                            <label for="iban" class="active">IBAN</label>
                        </div>
                        <div class="input-field col s4">
                            <input type="text" name="bic" id="bic" placeholder="BIC" class="validate" required>
                            <label for="bic" class="active">BIC</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col s6">
                        <div class="input-field col s6">
                            <input type="text" name="crn" id="crn" placeholder="Handelsregister-Nr."
                                   class="validate">
                            <label for="crn" class="active">Handelsregister-Nr.</label>
                        </div>
                        <div class="input-field col s6">
                            <input type="text" name="vat_id" id="vat_id" placeholder="Umsatzsteuer-ID"
                                   class="validate">
                            <label for="vat_id" class="active">Umsatzsteuer-ID</label>
                        </div>
                    </div>
                    <div class="col s6">
                        <div class="input-field col s6">
                            <input type="text" name="tax_id" id="tax_id" pattern="[0-9]{11}"
                                   placeholder="Steuernummer" class="validate" required>
                            <label for="tax_id" class="active">Steuernummer</label>
                        </div>
                        <div class="input-field col s6">
                            <input type="number" name="tax_rate" id="tax_rate" placeholder="Steuerrate" value="19"
                                   class="validate" required>
                            <label for="tax_rate" class="active">Steuerrate</label>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <input type="text" name="district_court" id="district_court" placeholder="Registergericht"
                               class="validate" required>
                        <label for="district_court" class="active">Registergericht</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" name="executives" id="executives" placeholder="Geschäftsführer"
                               class="validate" required>
                        <label for="executives" class="active">Geschäftsführer</label>
                    </div>
                </div>
                <div class="row" style="text-align: right;">
                    <button type="submit" class="waves-effect waves-light btn"><i
                                class="material-icons right">done</i>Überprüfen und fertigstellen
                    </button>
                </div>
            </form>

我嘗試了各種div classes ，但沒有一個起作用。 背后的魔力是什么？

Answer 1

您可以使用類的right按鈕。

Forge Admin模板是使用materialcss開發的。

有關對齊/幫助器類的詳細信息，請參考此內容： http : //hexesis.com/forge/dark/pages/materialize-helper.html

您可以通過我們的文檔/實時演示鏈接來更好地了解Materialcss。 這很簡單。