Question

由于bootstrap的每个表单元素的自动换行符，我在制作表单布局时需要帮助。这就是我想要实现的目标：

这就是我到目前为止所做的：

我希望为文本框和缩略图实现内联效果，其大小与文本+文本框输入相同。我尝试使用bootstrap的输入插件，但它似乎没有使缩略图和输入框相等。这是我的第二个屏幕截图的代码：

<div class="form-group">
    <div class="input-group">
        <span>4:45</span>
        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Title">
    </div>
</div>
<div class="form-group">
    <div>
        <div>
            <img src="@Url.Content("~/Files/Profile/7.jpg")" class="img-circle m-b" alt="logo" style="height: 50px; width: 50px">
        </div>
        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Description">
    </div>
</div>
<div class="form-group">
    <div class="input-group">
        <div>
            <img src="@Url.Content("~/Files/Profile/7.jpg")" class="img-thumbnail m-b" alt="logo" style="height: 50px; width: 50px">
        </div>
        <input type="text" class="form-control" id="exampleInputAmount" placeholder="Change Photo">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Cancel</button><button type="submit" class="btn btn-default">Save</button>
    </div>
</div>

请帮助如何实现该布局我只需要缩略图+输入框对齐。任何帮助表示赞赏。谢谢！抱歉英文不好。

Answer 1

这是经过修改的代码，可以正常使用。您的代码中缺少input-group-addon类。

<div class="form-horizontal">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">4:45</span>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Title">
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon ">
                    <img src="images/mission.jpg" class="img-thumbnail m-b" alt="logo">
                </div>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Description" />
            </div>
        </div>

        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">
                    <img src="images/mission.jpg" class=" img-thumbnail m-b" alt="logo">
                </div>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Change Photo" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Cancel</button><button type="submit" class="btn btn-default">Save</button>
            </div>
        </div>
    </div>

基本引导布局

1 个答案: