Question

我正在尝试做这样的事情。 http://www.lolnexus.com/

我正在尝试构建搜索模块，但无法将我的表单垂直堆叠。如何使用bootstrap更好地解决这个问题。我正在尝试构建它所说的输入召唤器名称的部分，然后是单选按钮，但我似乎无法想象如何至少在垂直对齐方式上进行对齐。自定义样式可以在以后使用。

    <div class="container">
        <div class="row">
        <div class="jumbotron text-center">
            <form role="form" method="post">
                <div class="col-md-6 form-group">
                    <input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
                    <button type="button" class="btn btn-primary">Search</button>
                </div>
                <div class="col-md-6 form-group">
                    <label> NA</label>
                    <input type="radio" name="region" id="NA" value="NA" />
                    <label>EUW</label>
                    <input type="radio" name="region" id="EUW" value="EUW">
                </div>
            </form>
        </div>

    </div>
</div>

Answer 1

您是否尝试将表格组的列宽更改为12列？

$total_items  = count( glob("test/*", GLOB_ONLYDIR) );

Answer 2

<div class="container">
<div class="row">
    <div class="col-xs-12">
        <div class="jumbotron">
            <form class="form" role="form" method="post">
                <div class="form-group">
                    <input type="search" class="form-control" size="100" id="mySearch" placeholder="Search for Summoner Name" />
                </div>
                <div class="form-group form-inline">
                    <div class="radio">
                        <label>
                            <input type="radio" name="region" id="NA" value="NA" />
                            NA
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="region" id="EUW" value="EUW">
                            EUW
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-primary">Search</button>
                </div>
            </form>
        </div>
    </div>
</div>

您可以使用许多不同的课程。我建议你更好地学习bootstrap来理解它。我的例子是一个跨越容器宽度的表单。搜索输入下方是单选按钮。它们下面是搜索按钮。 Bootstrap默认为12列布局。您指定了6列宽度，这些列将元素彼此相邻而不是垂直放置。您可以将form-inline类添加到form-group div，以使这些特定元素内联。表单控件类使控件跨越其容器的宽度。

Answer 3

不确定您要执行的操作，但如果您尝试将input和button放在一行，而单选按钮位于下方，则只需将form-groups放在一个单独的行中也行，并添加col-md-offset-3所以它将在中间。

垂直形式在Jumbotron里面

3 个答案: