代码之家 › 专栏 › 技术社区 › Stéphane GRILLON

HTML&CSS+Twitter引导:任何表单元素位于左侧,按钮位于右侧(行部分)

twitter-bootstrap css html

Stéphane GRILLON · 技术社区 · 7 年前

我们需要位置 Phone , Name ,和 Firstname 向左和 button 向右。我试着 float-left 和 float-right ,第一排可以吗,但之后会更复杂。对于第二排,我尝试使用 row + col-1.. 电话 姓名 ,和未与 input

  +--------------------------------------------------------------------------------+
  |  Title                                                              | button | |
  +------------+-------------------------------------------------------------------+
  |  Phone | input |    Name | input |    Firstname | input |           | button | |
  +------------+-------------------------------------------------------------------+
  |  Content table                                                                 |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  |                                                                                |
  +--------------------------------------------------------------------------------+

0 回复 | 直到 7 年前

Cichy 7 年前

你试过了吗 flexbox ?

示例引导 auto margins

<nav class="navbar">
  <form class="form-inline w-100 d-flex">
    <div class="form-group mr-4">
      <label for="field-1"class="mr-2">Field #1</label>
      <input class="form-control" id="field-1">
    </div>

    <div class="form-group mr-4">
      <label for="field-1"class="mr-2">Field #2</label>
      <input class="form-control" id="field-2">
    </div>

    <button class="btn btn-success ml-auto">Button</button>
  </form>
</nav>

现场示例 https://jsfiddle.net/cichy380/5svek2xn/

aviralar 7 年前

推荐文章

xajetin · 导航不更改滚动上的颜色

4 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

4 年前

Bryan Santos · 固定表头与引导

4 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

4 年前

tym · 根据用户偏好显示字段

4 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

4 年前

Pavel · 当验证DIV可见时,引导网格会移动

8 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

8 年前

Alexander David · 折叠卡打开,然后立即再次关闭

8 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

8 年前