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显示为您提供了根据您的喜好设置div的opder的最佳方法。我已附上样本片段。

＆＃13;

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

＆＃13;

希望这对你有用。

您可以在http://css-tricks.com/snippets/css/a-guide-to-flexbox/和http://philipwalton.github.io/solved-by-flexbox/找到有关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>

如何使用bootstrap填充空白区域

2 个答案: