0

我在我的项目中使用 Bootstrap3。我已将我的表格附在一个大屏幕中。这是我的表单的外观（目前看起来不太好）： 在此处输入图像描述

我试图让它变得更好。但情况越来越糟。我希望所有字段都在一行中，并且提交按钮在它们下方居中。我不知道该怎么做。我是使用 Bootstrap3 的新手。

这是我的html代码：

<form  action="" id="id-exampleForm" class="form-inline" method="post" >
    <input type='hidden' name='csrfmiddlewaretoken' value='1bfhNFINdeJVpSNBBQd0X7zLWLVwm1bB' />
    <div id="div_id_price_order" class="form-group">
        <label for="id_price_order_0" class="control-label col-lg-2 requiredField">
            price order
            <span class="asteriskField">*</span>
        </label>
        <div class="controls col-lg-12">
            <label class="radio">
                <input type="radio" checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >lowest</label>
            <label class="radio">
                <input type="radio" name="price_order" id="id_price_order_2" value="highest_price" >highest</label>
        </div>
    </div>
    <div class="form-group">
        <div id="div_id_newest_entry" class="checkbox">
            <div class="controls col-lg-offset-2 col-lg-12">
                <label for="id_newest_entry" class=" requiredField">
                    <input class="checkboxinput checkbox" id="id_newest_entry" name="newest_entry" type="checkbox" />
                    latest date
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div id="div_id_latest_year" class="checkbox">
            <div class="controls col-lg-offset-2 col-lg-12">
                <label for="id_latest_year" class=" requiredField">
                    <input class="checkboxinput checkbox" id="id_latest_year" name="latest_year" type="checkbox" />
                    latest year
                </label>
            </div>
        </div>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-primary button white" id="submit-id-submit" />
</form>

编辑：

我想要这样的东西：我在 powerpoint 上编辑了这个。所以看起来不是很好。 在此处输入图像描述

4

2 回答 2

1

评论后编辑

请在 Jumbotron 中查看带有内联按钮（不低于居中）和字段集的内联表单的小提琴。

注意：我改变了复选框和单选的垂直对齐方式+添加了一些右边距和一个额外的小按钮。如果屏幕作为引导行为超小，则表单将作为块显示。

提琴手

<div class="jumbotron">
<form class="form-inline">
    <fieldset class="radiogroup"> 
        <legend>Sorting Criteria</legend> 
        <label for="id_price_order_0">
            price order
            <span class="asteriskField">*</span>
        </label>
        <label class="radio" for="id_price_order_1">
            lowest
            <input type="radio" checked="checked" id="id_price_order_1" />
        </label>
        <label class="radio" for="id_price_order_2">
            highest
            <input type="radio" id="id_price_order_2" />
        </label>
        <label for="id_newest_entry" class="requiredField checkbox">
            latest date
            <input id="id_newest_entry"  type="checkbox" />
        </label>
        <label for="id_latest_year" class="requiredField checkbox">
            latest year
            <input  id="id_latest_year"  type="checkbox" />
        </label>
        <input type="submit" name="submit" value="Submit" class="btn btn-primary btn-xs"  />
    </fieldset>
</form>

于 2014-04-30T00:25:23.697 回答
1

Add the class form-control to ALL of your input elements for a start:

<input type="radio" class='form-control' checked="checked" name="price_order" id="id_price_order_1" value="lowest_price" >

Also, what I do to make my life easier is to pre-wrap the elements in the correct sized divs instead of doing it in the labels and inputs like so:

<div class='row'>
    <form ... >
        <div class='col-lg-2>
            <label ... ></label>
            <input ... >
        </div>
        <div class='col-lg-2'>
            ...
        </div>
        ...
    </form>
</div>

Its a tiny bit slower to load but it makes the code so much more readable I think it is worth it. Also I feel that there is a lot of extra in your code that shouldn't be there and is confusing check out the code here: http://getbootstrap.com/css/#forms. They show you exactly how to format an in-line form.

Could being inside a .jumbotron be causing the issues? Why don't you try a panel or a well This should work for you:

<div class='panel panel-default'>
<div class="panel-heading">In-line Form</div>
<div class="panel-body">
    <form action='anotherScript.php' method='post' class='form-inline'>
    <div class='row'>
        <div class='col-md-4'>
            <strong>Price:</strong>
            <div class="radio-inline">
                <label>
                    <input type="radio" name="rad1" value="low" checked>
                    Lowest
                </label>
            </div>
            <div class="radio-inline">
                <label>
                    <input type="radio" name="rad1" value="high">
                        Highest
                    </label>
            </div>
        </div>
        <div class='col-md-4'>
            <div class="checkbox-inline">
                <label>
                    <input type="checkbox" name='date' value='date'>
                    Latest Date
                </label>
            </div>
        </div>
        <div class='col-md-4'>
            <div class="checkbox-inline">
                <label>
                    <input type="checkbox" name='year' value='year'> 
                    Latest Year
                </label>
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='col-md-12'>
            <center><button type='submit' class='btn btn-primary'>Submit</button></center></form>
        </div>
    </div>
</div>

Fiddle: http://jsfiddle.net/52VtD/5046/

Make sure you stretch the results panel to full width to see the form in-line.

于 2014-04-29T20:25:25.167 回答