代码之家 › 专栏 › 技术社区 › ChronicLogic

将下一个同级元素推到相对位置的元素上

bootstrap-4 css html

1

ChronicLogic · 技术社区 · 7 年前

我有个小问题。结构如下:

<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%;
}

以下是一个图像示例:

我希望右边的第6列div按下左边第6列中的save按钮,因为最右边的div中有开始重叠的元素。我该怎么做呢?

1 回复 | 直到 7 年前

1

tao 7 年前

这样就可以了:

<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提交表单。