Question

如何在下面的示例中实现所有表单元素都在一行中？引导类form-inline不适用于小视口。来自官方自助site：

这仅适用于视口中至少为768px的表单宽。

＆＃13;

#containerGraph {
  position: relative;
  width: 900px;
  height: 500px;
  border: 1px solid black;
  overflow: auto;
  resize: horizontal;
}
/*  set the position attribute for all div elements inside the mainContainer*/

#containerGraph > div {
  position: absolute;
}
.paramElement {
  width: 200px;
  height: auto;
  border-radius: 18px;
  text-align: center;
  background-color: #e6e6e6;
  color: #4d4d4d;
  font-family: Verdana, Helvetica, sans-serif;
  padding-bottom: 5px;
  font-size: small;
  margin-top: 10px;
}
.paramElementHeading {
  font-size: larger;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.paramElementForm {
  margin-top: 10px;
}
.paramElementForm > input {
  width: 80px;
}
.column1 {
  margin-left: 3px;
}
.column2 {
  margin-left: 163px;
}
.column3 {
  margin-left: 323px;
}
.column4 {
  margin-left: 483px;
}
.column5 {
  margin-left: 643px;
}
.column6 {
  margin-left: 803px;
}
.column7 {
  margin-left: 963px;
}
.column8 {
  margin-left: 1123px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containerGraph">


  <div class="column1 paramElement" id="param1">
    <div class="paramElementHeading">
      Title Title Title Title
    </div>

    <form class="form-inline" style="width:30px;">
      <div class="form-group">
        <label for="focusedInput">Focused</label>
        <input class="form-control" id="focusedInput" type="text">
      </div>
      <div class="form-group">
        <select class="form-control" style="width:auto;" id="sel1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </form>
  </div>
</div>

＆＃13;

来自this类似问题的第二个解决方案在我的案例中并不起作用。而且我不想使用第一个答案中提到的网格系统。

Answer 1

试试这个：

检查演示 here

CSS：

@media (max-width: 767px) {
  .form-inline > .checkbox {
    margin-left: 5px;
    margin-right: 5px;
  }
  .form-inline .form-control {
    width: auto;
    display: inline-block;
  }
  .form-inline label {
    margin-right: 5px;
  }
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
}

对于小于768px宽的视口，Bootstrap form-inline

1 个答案: