Question

不确定如何设置标题。我的问题在视觉上很明显。

  <div class="row">
    <input class="col-xs-2" type="" name="" placeholder="From">
    <input class="col-xs-2" type="" name="" placeholder="To">
    <input class="col-xs-2" type="" name="" placeholder="29/11/2015">
    <input class="col-xs-2" type="" name="" placeholder="Return">
    <select class="col-xs-2">
      <option>1 Passenger</option>
      <option>2 Passengers</option>
      <option>3 Passengers</option>
      <option>4 Passengers</option>
      <option>5 Passengers</option>
      <option>6 Passengers</option>
    </select>
    <button class="col-xs-2" id="search-btn">S</button>
  </div>

搜索按钮必须具有一定的宽度，因此右侧有未填充的空间，如何将其填充到最后？包装器有一定的固定宽度。

Answer 1

Flexbox可以做到这一点。

input,
select {
  height: 40px;
  flex:1;
}

#search-btn {
  width: 50px;
  height: 40px;
}

.row {
  margin: 0;
  display: flex;
}

JSFiddle Demo

＆＃13;

 body {
   margin: 10px;
 }
 .container {
   width: 500px;
   background: #333;
   padding: 10px;
 }
 input,
 select {
   height: 40px;
   flex: 1;
 }
 #search-btn {
   width: 50px;
   height: 40px;
 }
 .row {
   margin: 0;
   display: flex;
 }

＆＃13;

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <input class="col-xs-2" type="" name="" placeholder="From">
    <input class="col-xs-2" type="" name="" placeholder="To">
    <input class="col-xs-2" type="" name="" placeholder="29/11/2015">
    <input class="col-xs-2" type="" name="" placeholder="Return">
    <select class="col-xs-2">
      <option>1 Passenger</option>
      <option>2 Passengers</option>
      <option>3 Passengers</option>
      <option>4 Passengers</option>
      <option>5 Passengers</option>
      <option>6 Passengers</option>
    </select>
    <button class="col-xs-2" id="search-btn">S</button>
  </div>
</div>

＆＃13;

Answer 2

这是可能的，但您必须在此处查看Bootstrap范围之外的内容。为什么？ Bootstrap的范围为12，不能除以5.为什么5你认为？嗯，你在按钮上有一个固定的宽度，所以你现在剩下5个必须填补空间的物品。所以你必须开箱即用。

我在CSS中使用了calc函数来计算容器的空间，减去50px。这将是100％，然后你用相等的长度（20％）填充5个项目。

https://jsfiddle.net/DTcHh/21451/

<div class="container">
  <div class="row">
      <div class="filler">
        <input class="fifth" type="" name="" placeholder="From">
        <input class="fifth" type="" name="" placeholder="To">
        <input class="fifth" type="" name="" placeholder="29/11/2015">
        <input class="fifth" type="" name="" placeholder="Return">
        <select class="fifth">
          <option>1 Passenger</option>
          <option>2 Passengers</option>
          <option>3 Passengers</option>
          <option>4 Passengers</option>
          <option>5 Passengers</option>
      <option>6 Passengers</option>
    </select>
    </div>   
    <button class="" id="search-btn">S</button>
  </div>
</div>

你的新CSS。

/* Latest compiled and minified CSS included as External Resource*/    
/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.container {
  width: 500px;
  background: #333;
  padding: 10px;
}

.filler {
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px); 
}

.fifth {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    width: 20%;
}


input,
select {
  height: 40px;
}

#search-btn {
  min-width: 50px;
  max-width: 50px;
  height: 40px;

}

.row {
  margin: 0;
}

Answer 3

只需删除css中的宽度，search-btn id必须如下：

#search-btn {
  height: 40px;
}

Answer 4

在搜索中，您已经提供了ID =＆＃34;＃search-btn＆＃34;

因为你提到了风格

#search-btn { height: 40px; width: 50px; }

删除其中的宽度。

如何将Bootstrap列宽减小到特定按钮的大小？

4 个答案: