在相对定位的元素上进行下一个兄弟推送

Question

我有一个小问题。 什么是对所述div的最后一个元素进行同级推送的最佳方法？ 这是结构：

<div class="row">
    <div class="formContainer col-lg-6">
        <form>
            <fieldset>
                ...content....
                <button>Submit Form</button>
            </fieldset>
        </form>
    </div>
    <div class="col-lg-6" id="datePicker">
       calendar where user picks dates
    </div>
</div>

和CSS（或多或少）

form > button {
    width: 200px;
    margin: auto;
    display: block;
    margin-bottom: 15px;
    position: relative;
    right: -54%;
}

以下是一个图像示例：

我希望右col-6 div按下左侧col-6中的保存按钮，因为要添加的最右div元素开始重叠。我应该如何去做？

Answer 1

这可以做到：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row">
    <div class="formContainer col-lg-6">
        <form>
            <fieldset>
                ...content....
            </fieldset>
        </form>
    </div>
    <div class="col-lg-6" id="datePicker">
       calendar where user picks dates
    </div>
    <div class="col-lg-12 text-center">
       <button class="btn btn-default"
               onclick="$('.formContainer form', $(this).closest('.row')).submit();">Submit Form</button>
    </div>
</div>

注意，我将按钮移到了新列中，并且我使用嵌入式Javascript在按下表单时提交了表单。