如何使用bootstrap填充空白

Question

我想设计一个有输入框和一些其他元素的div。我想使用bootstrap来给输入框一个动态的大小，输入框的宽度随着窗口宽度的变化而变化，在移动设备中以两行显示。

如下所示：

​

​

这是一个没有任何类的示例代码：

<form>
<div>
    <input type="submit" value="search">
    <select>
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
    </select>
    some text
</div>
<div>
    <input type="text" placeholder="search text input">
</div>

​

Answer 1

​

​

为了实现您的需求，您需要使用纯CSS方法来实现Flexbox的显示属性。在这里，您将根据屏幕分辨率重新排列UI。Flexbox display为您提供了根据您的喜好设置div的opder的最佳方法。我已将示例代码片段与此一起附上。

​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.FormContainer {
	width: 100%;
}
.Class1 {
    width: 50%;
    float: left;
}
.Class2 {
    width: 50%;
    float: right;
}

@media only screen and (max-width: 768px) {
    .FormContainer {
	    display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
	}
    .Class1 {
		order: 2;
        width: 100%;
        float: right;
    }
    .Class2 {
	    order:1;
        width: 100%;
        float: left;
    }
}
</style>
<body>

<form class="FormContainer">
<div class="Class1">
    <input type="submit" value="search">
    <select>
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
    </select>
    some text
</div>
<div class="Class2">
    <input type="text" placeholder="search text input">
</div>
</form>

</body>
</html>

​

希望这对你来说没什么问题。

你可以在这里找到更多关于Flexbox、http://css-tricks.com/snippets/css/a-guide-to-flexbox/和http://philipwalton.github.io/solved-by-flexbox/的信息。

另请看this解决方案，其中解释了有关Flexbox的更多信息

Answer 2

我在你的文章中实现了第一个图像，并在下面的代码中实现了它。试着运行它，别忘了展开代码段

​

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form>
  <div class="row">
    <div class="col-sm-2">
      <input type="submit" class="form-control" value="search">
    </div>
    <div class="col-sm-3">
      <select class="form-control">
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
      </select>
    </div>
    <div class="col-sm-2">
      some text</div>

    <div class="col-sm-2">
      <input type="text" class="form-control" placeholder="search text input">
    </div>
  </div>

​