Question

我的form-inline Bootstrap视图中有form ASP.NET MVC：

<div class="home-search">
    @using (Html.BeginForm("index", "search", FormMethod.Get, new { @class="form-inline", @role = "search"}))
        {
            <div class="form-group">
                <input type="text" class="form-control" name="q" placeholder="enter a title name..." required>
                <select name="t" class="form-control selectpicker" data-width="auto">
                        <option value="all">All</option>
                        <option value="movies">Movies</option>
                </select>
            </div>
            <button type="submit" class="form-control btn btn-primary"><i class="fa fa-search fa-lg"></i></button>
        }
</div>

...并伴随CSS：

.home-search form {    
    text-align: center;
    padding: 20px;
    background-color: rgba(1, 1, 1, 0.5);
}

.home-search input, .home-search select, .home-search button {
    border-radius: 0;
}

当最小化浏览器时，表单的三个控件垂直堆叠，这就是Bootstrap的工作方式。但是，我如何将表单的元素保存在一行中，并让它们自动调整大小以适应屏幕？ @media是否会查询到这里的方式，还是我错过了一些微不足道的事情？

Answer 1

DEMO：https://jsbin.com/mayoru

是的，媒体查询和自定义类。最小宽度：350px是因为该特定形式看起来很好直到大约320px。当您在.container（30px）的两侧添加装订线 - 15px时，它是350px。由于最小的设备是240px，在那之下是全宽或开始看起来很糟糕。最大宽度：767px是为了不会覆盖768px最小宽度的默认样式。

<强> HTML：

<div class="container">

  <form class="form-inline custom-form">
              <div class="form-group">
                <input type="text" class="form-control" name="q" placeholder="enter a title name..." required>
                <select name="t" class="form-control selectpicker" data-width="auto">
                        <option value="all">All</option>
                        <option value="movies">Movies</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary form-control"><i class="fa fa-search fa-lg"></i></button>
    </div>


</div>

<强> CSS

.custom-form .form-control {
    margin-bottom: 5px
}
.custom-form .btn .fa {
    line-height: 0px
}
@media (min-width:350px) and (max-width:767px) { 
    .custom-form .form-control {
        display: inline-block;
        width: auto;
        margin: 0;
    }
    .custom-form .form-group {
        display: inline-block;
        width: auto;
        margin-bottom: 0;
        vertical-align: middle;
    }
}

在浏览器调整大小时保持内联Bootstrap形式内联

1 个答案:

DEMO：https://jsbin.com/mayoru