显示带有流体列的固定宽度列 - bootstrap

Question

我的流畅页面工作得非常好，但有时页面上的广告可以固定宽度为140px。

请参见下图：

广告会动态添加，以便网页随时都有广告。

我必须始终为他们设一个div，如果有广告，页面必须适应。有时它只能有一个广告而不是两个广告。

<div class="row">
  <div style="width:140px; float:left">Fixed Width</div>     
  <div class="col-lg-6>Fluid Width</div>
  <div class="col-lg-6>Fluid Width</div>
  <div style="width:140px; float:right;">Fixed Width</div> 
</div>

所以，案例是：

• 没有广告

• 1个广告

• 2个广告

感谢您的帮助。

Answer 1

我可以为您推荐一个flexbox解决方案，flexbox module可以为您的布局做很多事情之一。 代码注释中的说明

JSfiddle Demo

<强> CSS

/* The Essential flexbox rules */

.flex-container {
  display: flex;
}
.ad {
  flex: 0 1 140px; /* Flex-grow: 0, Don't grow on resize and fixed width of 140px */
}
.center-content {
  flex: 1; /* Grow when the ads are removed */
}

<强> HTML

<div class="flex-container">
  <div class="ad">Ad Content</div>
  <div class="center-content">
    Content
  </div>
  <div class="ad">Ad Content</div>
</div>

修改后的输出：

＆＃13;

＆＃13;

$('.btn-primary.first').on('click', function() {
  $('.ad').first().toggleClass('remove');
});

$('.btn-primary.second').on('click', function() {
  $('.ad').last().toggleClass('remove');
});

＆＃13;

html,
body {
  height: 100%;
}
.flex-container {
  display: flex;
  height: 100%;
  color: #fff;
  font-family: roboto;
}
.ad {
  background: #3A97D4;
  flex: 0 1 0;
  flex-basis: 140px;
  padding: 10px;
}
.center-content {
  margin: 0 2%;
  flex: 1;
  background: #838383;
  padding: 10px;
}
.remove {
  display: none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="ad">Ad Content</div>
  <div class="center-content">
    Content
    <br>
    <button class="btn btn-primary first">Toggle 1st ad</button>
    <button class="btn btn-primary second">Toggle 2nd ad</button>
  </div>
  <div class="ad">Ad Content</div>
</div>

＆＃13;

＆＃13;

＆＃13;