twitter-bootstrap 使复选框，选择和输入字段内联

Question

提问by Smithy

I am trying to make a search bar where a green div would be in the middle of the grey one(see http://codepen.io/anon/pen/LRBEvq?editors=1100), and checkboxes, select drop menu, and input field all inline with two buttons - so everything in the same row. I am using Bootstrap to make it responsive but got stuck and can't figure it out.. thank you for all the help!

我正在尝试制作一个搜索栏，其中绿色 div 将位于灰色的中间（请参阅http://codepen.io/anon/pen/LRBEvq?editors=1100）和复选框，选择下拉菜单，然后输入字段都与两个按钮内联 - 所以所有内容都在同一行中。我正在使用 Bootstrap 使其响应，但卡住了，无法弄清楚..感谢您的所有帮助！

Here's my html:

这是我的 html：

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                 <label class="checkbox-inline">
                   <input type="checkbox" value="" checked>Lorem
                 </label>
                 <label class="checkbox-inline">
                   <input type="checkbox" value="">Ipsum
                 </label>
               </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

Answer 1

采纳答案by andreas

Use display: inline-block;for your wrapper divs to behave like inline elements without losing their block properties:

使用display: inline-block;您的包装div的表现就像一个没有失去他们的块属性内联元素：

.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}

If you also want the buttons to be in the same row, use a <div class="col-md-12">for the whole content.

如果您还希望按钮在同一行中，请<div class="col-md-12">对整个内容使用 a 。

To center your menu bar horizontally, use margin: 0 auto;; to center it vertically, positionit, apply a top: 50%;and translateit back the half of its size in negative y-direction (up):

要水平居中菜单栏，请使用margin: 0 auto;; 将其垂直居中，定位，应用 atop: 50%;并将其沿负 y 方向（向上）平移回其大小的一半：

.formContainer {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}

To make the input text field as long as the remaining space, just set the width of the input the same as its wrapper div:

要使输入文本字段与剩余空间一样长，只需将输入的宽度设置为与其包装器 div 相同：

.mainContent .choice-input input {
    width: inherit;
}

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}
.mainContent .choice-input input {
  width: inherit;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-12">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

Answer 2

回答by Muneeb Pullani

Horizontal centering:

水平对中：

For horizontal centering, we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.

对于水平居中，我们希望左右边距相等。这样做的方法是将边距设置为“自动”。这通常与固定宽度的块一起使用，因为如果块本身是灵活的，它将简单地占用所有可用宽度。

Vertical centering:

垂直居中：

The essential rules are:

基本规则是：

Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
Make the element itself absolutely positioned.
Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)

使容器相对定位，即声明它是绝对定位元素的容器。
使元素本身绝对定位。
将它放在容器的中间，用“顶部：50%”。（注意这里的 50%' 是指容器高度的 50%。）
使用平移将元素向上移动其自身高度的一半。（“translate(0, -50%)”中的“50%”指的是元素本身的高度。）

So your code may seem like this

所以你的代码可能看起来像这样

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  position: relative;
}

.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

I hope you solved all the other problems.

我希望你解决了所有其他问题。

Answer 3

回答by arsinawaz

Check the code below, i have put the html controls in separate divs with bootstrap grid classes to make them inline and added margin: 0 autoin .formContainerclass

检查下面的代码，我已将 html 控件放在带有引导网格类的单独 div 中，以使它们内联并添加margin: 0 auto到.formContainer类中

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->
            <div class="col-md-4">
            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
             </div>

            <div class="col-md-4">
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            </div>

            <div class="col-md-4">
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>




.main {
    background-color: grey;
    width: 1202px;
    height: 156px;
    margin: 0 auto;
}

.formContainer {
    width: 1140px;
    height: 85px;
    background-color: green;
  margin: 0 auto;

}

button {
    height: 37px;
    width: 160px;
}

.choice {
    background-color: lightgrey;
    height: 37px;
}

.checkbox {
    width: 207px;
    border: 1px solid white;
}

.choice-select {
    width: 173px;
}

.choice-input {
    width: 390px;
}

Answer 4

回答by ugreen

You should be able to do what you want with only bootstrap markup. I've forked your pen and modified it a little:

您应该能够只使用引导标记来做您想做的事情。我已经分叉了你的笔并对其进行了一些修改：

http://codepen.io/ugreen/pen/XjBpqX

<div class="container">
    <div class="row">

            <div class="col-md-3 text">
                Lorem lorem lorem
                <div class="pull-right">Ipsum lorem ipsum</div>
            </div>

            <div class="col-md-5">
                <div class="form-inline">
                    <div class="form-group">
                        <input type="checkbox" value="" checked>
                        <label>Lorem</label>
                        <input type="checkbox" value="">
                        <label>Ipsum</label>
                    </div>
                    <div class="form-group">
                        <select class="form-control choice-select">
                            <option value="one">One</option>
                            <option value="two">Two</option>
                            <option value="three">Three</option>
                            <option value="four">Four</option>
                            <option value="five">Five</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Placeholder text">
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="button-group">
                    <button class="btn btn-default">Lorem ipsum lorem</button>
                    <button class="btn btn-default">Lorem lorem lorem</button>
                </div>
            </div>
        </div>
    </div>
</div>

But it might be even better to do something like in the bootstrap docs about navbars: http://getbootstrap.com/components/#navbar

但是在引导程序文档中关于导航栏的内容可能会更好：http://getbootstrap.com/components/#navbar

Answer 5

回答by Kiran Dash

Try modifying these rules:

尝试修改这些规则：

.checkbox, .radio {
    position: relative;
    display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
    margin-top: 10px;
    margin-bottom: 10px;
}

.choice-select {
    width: 173px;
    display: inline-block; // added inline-block
}

.choice-input {
    width: 176px; // reduced width.
    display: inline-block; // added inline-block
}

twitter-bootstrap 使复选框，选择和输入字段内联

提问by Smithy

采纳答案by andreas

回答by Muneeb Pullani

回答by arsinawaz

回答by ugreen

回答by Kiran Dash

相关推荐

最近更新

标签

twitter-bootstrap 使复选框，选择和输入字段内联

提问by Smithy

采纳答案by andreas

回答by Muneeb Pullani

回答by arsinawaz

回答by ugreen

回答by Kiran Dash

相关推荐

twitter-bootstrap 在响应式网站上嵌入 Facebook 帖子

twitter-bootstrap Bootstrap Jumbotron 背景图像不透明度和宽度和高度？

twitter-bootstrap 如何在不悬停或单击的情况下保持活动引导工具提示

twitter-bootstrap 如何将引导程序复选框表单居中

相关推荐

最近更新

标签