html - 如何增加 Bootstrap 3 中响应式 div 的宽度？

Question

我无法增加响应式 Bootstrap 布局中 div 的宽度。我需要使用两列布局，左侧一列固定，右侧一列流体(搜索框)，但最后一列不展开。另外，当屏幕分辨率变小时，div 必须显示在另一个之上。

这是代码:

    <div class="columns-container">

    <div class="left-column">
              <center>
    <img class="img-responsive" src="http://shades.powercommerce.es/images/pics/shades-retail-header_2.jpg" />
  </center>
    </div>

    <div class="right-column" >
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search..." style="width:90%;">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>
  </div>
</div>
    </div>

这是 CSS:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body { margin: 0 auto; }

footer, header { position: relative; clear: both; }

.left-column, .right-column, footer, header {  border: 1px solid  #ccc; padding: 1em; margin: .5em; }

.nav {
  list-style: none;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.nav > li,
.nav > li > a {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.inline-items {
  margin-top: 0;
}

.inline-items li {
  margin-left: 0;
  border-left: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
}

.inline-items li:first-child {
  margin-left: 0;
  border: none;
  padding-left: 0;
  padding-right: 10px;
}

.inline-items li:last-child {
  padding-right: 0;
}


/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {

  .columns-container { 
    display:table;    
        width: 100%;
        float: left;
    }

  .left-column { 
    width: 18.75em;
    margin-right: -19.3em;
    position: relative;
    float: left;
    display:table-cell;    
  }
    .right-column { 
    display:table-cell;    
    margin-left: 20em;
    float: left;
  }

Codepen

Answer 1

您错误地使用了 Bootstrap，请使用内置的 row 和 col- css 类。

在您的示例中:

<div class="row">
    <div class="col-lg-2 col-sm-12 left-column">
        <img class="img-responsive" src="http://shades.powercommerce.es/images/pics/shades-retail-header_2.jpg" />
    </div>
    <div class="col-lg-10 col-sm-12 right-column">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search..." style="width:90%;">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div>
    </div>
</div>

使用这种方式，当显示屏较大时，将使用 col-lg-2 和 col-lg-10 使左列变小，当显示屏较大时，将使用 col-lg-2 和 col-lg-10将使用 col-sm-12 类，并且两列的大小相同，一列在另一列下。

更新:

我必须同意@AlexG的评论，表格不应该用于样式化，并且center标签已经deprecated .