d4rty d4rty - 1 month ago 13
CSS Question

Bootstrap form-inline for viewports that are less than 768px wide

How can I achieve that all the form elements are in one line in the example below? The bootstrap class

form-inline
is not working on small viewports. From official bootstrap site:


This only applies to forms within viewports that are at least 768px
wide.




#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;
}

<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>





The second solution from this similar question isn't working in my case. And I don't want to use the grid systems as mentioned in the first answer.

Answer

Try this:

Check demo 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;
  }
}