0

在我的网站上，我使用 span 标签从 twitter 引导模式显示的页脚左侧拉出一个按钮和一个文本输入，图片将显示这一点。

由于某种原因，左侧的两个按钮低于右侧的两个按钮，我该如何提高左侧的两个？HTML：

CSS：

.modal-footer .floatLeft {
    float: left;
}

HTML：

<div class="modal-footer">
    <span class="floatLeft">
        <input placeholder="out of" class='changeMaxMark' style='margin-top:9px;'id='maxMarkBox' name='maxMarkBox' type='text'>
        <button  id='changeMaxMark' name='changeMaxMark' class='btn btn-success'> Set All </button>
    </span>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>

链接到图片 1 ( http://snag.gy/i5FRT.jpg ) 链接到图片 2 ( http://snag.gy/2Y9Q2.jpg )

4

1 回答 1

1

首先删除跨度。Bootstrap 有特定的 CSS 类来拉东西。pull-left我添加到前两个元素中。

编辑后的 ​​HTML 是这样的：

<div class="modal-footer">    
    <input placeholder="out of" class='changeMaxMark pull-left' id='maxMarkBox' name='maxMarkBox' type='text'>
    <button  id='changeMaxMark' name='changeMaxMark' class='btn btn-success  pull-left'> Set All </button>
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>

您还可以在输入字段上使用特定样式将 margin-top 向下推 9px，这是不必要的。

不需要自定义 CSS 类或其他标记。

这是工作的JSFiddle

于 2013-03-06T20:45:14.913 回答