1

我想完成一个水平表单，每行有多个左对齐表单控件。最终布局应如下所示

在此处输入图像描述

首先，我希望图标显示在用户名右侧的用户名旁边，就像上面显示的图像一样。

我将 GWT 与 bootstrap3.3.2 一起使用。我阅读了很多关于混合使用水平表单和内联表单或使用水平表单和表单控件行的内容。我最喜欢的最后一种方法。

我准备了一个 bootply，它显示了我的第一个问题（我将创建第二个 bootply 和 stackoverflow 帖子以解决其他问题）。http://www.bootply.com/hheckner/GiPzaqWHlT

如您所见，该图标与用户名称（垂直）对齐得不好。此外，我想在用户名旁边显示 NEXT 图标，因此如果用户名较长，则图像应向右移动，反之亦然。使用网格在这里没有帮助（至少我认为）。该图标应该立即显示在用户名旁边吗？

我怎样才能做到这一点？

4

1 回答 1

1

要在某些文本旁边显示图标，您只需要在文本之后有跨度，但仍然在您的<p>元素内。

我只使用 Bootstrap Grid 制作了与您在屏幕截图中提供的表格有些相似的表格。可能有多种解决方案，就代码行而言可能会更好，但是当您习惯了网格系统时，这应该是一种非常快速的方法。

我必须警告你我使用<h4></h4>了所有文本，并且没有用于某些文本的特殊元素，所以你应该相应地修复它。此外，Bootstrap 的form-inline类仅在视口大于 768px 时才有效 - 您可能无法在 JSFiddle 上看到您想要的工作示例，但是当您在大于 768px 的屏幕上看到它时，它应该没问题。

<div style="text-align:left;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <h4>Owner</h4>
            </div>
            <div class="col-md-8">
                <h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
            </div>
        </div>
        <form class="form-inline">
            <div class="row">
                <div class="col-md-4">
                    <h4>Scheduled for</h4>
                </div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-1">
                            <h4>Begin:</h4>
                        </div>
                        <div class="col-md-11">
                            <div class="form-group">
                                <input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="beginTime" placeholder="10:30">
                            </div>
                            (Duration: <div class="form-group">
                                <input type="text" class="form-control" id="beginTime" placeholder="30">
                            </div> min)
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-1">
                            <h4>End:</h4>
                        </div>
                        <div class="col-md-11">
                            <div class="form-group">
                                <input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="endTime" placeholder="11:30">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <h4>Location</h4>
                </div>
                <div class="col-md-8">
                    <div class="form-group">
                        <input type="text" class="form-control" id="location">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/

于 2015-10-12T14:28:15.223 回答