如何在bootstrap中的一行中添加两个元素?

时间:2016-04-12 17:15:03

标签: html css twitter-bootstrap

我只是在使用Boostrap进行学习和编码,我想的布局是这样的:

Row
  <SmallerColumn that hold label 1> <Larger Column that hold the control 1>
  <SmallerColumn that hold label 2> <Larger Column that hold the control 2>
EndRow

例如,comboboxlabel说明了什么是conmbox。 例如:国家/地区:国家组合

2 个答案:

答案 0 :(得分:1)

这个问题非常简单,但是对于初学者来说有点混乱,不要惹恼它,只需要快速阅读Bootstrap关于form control布局的文档。

布局的摘录如下:

_1

不需要.row作为.form-group将处理新添加的元素。

答案 1 :(得分:1)

你需要

form-horizontal类引导程序。但是form-group类将处理不同的行。但是使用form-control类会导致您在文本周围有一个边框:

form-control class

为了没有边框,使用control-label作为类。

试试这段代码:

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-2">Islands:</label>
    <div class="col-sm-10">
    <label class="control-label" id="l1" >Combobox of Islands 1</label>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Countries:</label>
    <div class="col-sm-10">
    <label class="control-label" id="l2" >Combobox of Countries 1</label>
    </div>
  </div>
</div>

这是一个jsfiddle:https://jsfiddle.net/mayank_shubham/an197vva/