Question

我正在尝试使用Bootstrap 3中的选择框创建一个表单但由于某种原因我无法弄清楚如何让选择框的宽度相同而且我无法弄清楚为什么没有偶数当盒子堆叠在彼此之上时，盒子之间的间隙。（第二和第三个盒子没有间隙，我想要一个间隙）。如果有人能告诉我我的错误，真的很感激。

我做了一个小提琴here。

<div class="container">
  <div class="row row-centered">
    <div class="col-xs-8">
      <h3> Quick Search </h3>
      <form role="form" action="post" method="post">
        <div class="col-xs-8 col-md-3 col-lg-3">
          <div class="form-group">
            <div class="input-group">    
              <select class="form-control input-sm" name="location">
                <option value="" disabled selected>Location</option>
                 <option value="London">London</option>
                <option value="Bristol">Bristol</option>
                <option value="Manchester">Manchester</option>
              </select>
            </div>
          </div>
        </div>   
        <div class="form-group">
          <div class="col-xs-8 col-md-3 col-lg-3">
            <div class="input-group">
              <select id="skill" name="skill" class="form-control input-sm" ">
                <option value=" " disabled selected>Type of editor</option>
                <option value=""> All editors</option>
                <option value="offline">Offline editor</option>
                <option value="online">Online editor</option>
                <option value="offline,online ">Offline & Online editor</option>
              </select>
            </div>
          </div>
        </div>    
        <div class="form-group ">
          <div class="col-xs-8 col-md-3 col-lg-3 ">
            <div class="input-group ">
              <select id="start " name="start " class="form-control input-sm "">
                <option value="" disabled selected>When</option>
                <option value="">Anytime</option>
                <option value="today">Today</option>
                <option value="tomorrow">Tomorrow</option>
                <option value="next_week">Next Week</option>
                <option value="this_month">This Month</option>
                <option value="next_month">Next Month</option>
                <option value="in_future">In the Future</option>
              </select>    
            </div>
          </div>
        </div>    
        <div class="col-xs-8 col-md-3 col-lg-3">
          <button type="submit" name="submit" value="submit_1" class="btn btn-small btn-default btn-pull-right">Search</button>
          </button>
        </div>
      </form>    
      <br>
    </div>
    <!--Col-->
  </div>
  <!--row-->

Answer 1

您的格式化等有点奇怪，但奇数间距所需的修复很简单。

H3下的第一部分

</h3>
      <form role="form" action="post" method="post">
        <div class="col-xs-8 col-md-3 col-lg-3">
          <div class="form-group">
            <div class="input-group">

只需更改为： -

</h3>
      <form role="form" action="post" method="post">
        <div class="form-group">
          <div class="col-xs-8 col-md-3 col-lg-3">
            <div class="input-group">

每个输入组的代码块都不相同。

Nickanor对最小宽度的修正应解决方框的间距都是相同的宽度。

我可能会建议宽度稍宽一些，并将其添加到

上方的页面顶部

<style>
  .input-sm {
    min-width: 160px !important;
  }
</style>

Answer 2

.input-sm { min-width: 150px !important; } https://jsfiddle.net/v94e5sun/

Answer 3

试试这个..希望这有帮助

<!DOCTYPE html>
<html>
<head><title>Page Title</title>
</head>
<body>
<div class="container">
    <div class="row row-centered">
        <div class="col-xs-8">
            <h3>
                Quick Search
            </h3>
            <form role="form" action="post" method="post">
                <div class="col-xs-8 col-md-3 col-lg-3">
                    <div class="form-group">
                        <div class="input-group">

                            <select class="form-control input-sm" name="location">
            <option value="disabled selected">Location</option>
             <option value="London">London</option>
            <option value="Bristol">Bristol</option>
            <option value="Manchester">Manchester</option>
          </select></div></div></div><div class="form-group">
                    <div class="col-xs-8 col-md-3 col-lg-4">
                        <div class="input-group">
                            <select id="skill" name="skill" class="form-control input-sm"><option value="disabled selected">Type of editor</option><option value=" ">All editors</option><option value="offline">Offline editor</option><option value="online">Online editor</option><option value="offline,online">Offline and Online editor</option></select></div></div></div>

为什么选择框的间距不均匀？

3 个答案: