代码之家 › 专栏 › 技术社区 › rohit12sh

引导程序3:容器Div重叠

responsive twitter-bootstrap-3 twitter-bootstrap angular html

rohit12sh · 技术社区 · 7 年前

我正在用Bootstrap 3.3.7设计一个前端,并使用Flatly主题。

我遇到了一个我认为应该有微不足道的解决方案的问题。

我想要一个70-30比例的容器,我正在尝试以下HTML代码:

<div class="container">
 <div class="row">
  <div class="col-sm-6">
   <custom-data-table/>
  </div>

  <div class="col-sm-6">
   <label for="searchQ">Search</label>
   <input
    required
    minlength="1"
    id="searchQ"
    ngModel name="searchQ"
    type="text"
    #searchQ="ngModel"
    (change)="log(searchQ)"/>
   </div>
 </div>
</div>

使用这种风格,无论屏幕有多宽,我都会遇到重叠的div。

我希望这两个分区以70:30的比例共享一个没有重叠的屏幕。

欢迎提出任何建议/想法!

这就是重叠问题:

1 回复 | 直到 7 年前

tao 7 年前

只需使用一列,并使用您自己的自定义逻辑将其拆分:

.myThing {
  display:flex;
}
.myThing .firstColumn {
  flex: 0 0 70%;
}
.myThing .second {
  flex: 0 0 30%;
}

<div class="container">
 <div class="row">
  <div class="col-xs-12 myThing">
    <div class="firstColumn"></div>
    <div class="secondColumn"></div>
  </div>
 </div>
</div>

我在这里使用flex,但你可以使用floating blocks ,如果您愿意的话。

推荐文章

user5900363 · 具有引导功能的2列响应式布局4

7 年前

user9459537 · 响应式Web设计不适用于根据页面宽度仅显示一个div的情况

7 年前

Filip Vuskovic · Bootstrap 3.3.7 md上的列布局问题

7 年前

Bart · 获取图像以覆盖div,同时保持纵横比,而不使用css背景图像

7 年前

X3N4 · 在Materialize CSS中,如何在卡片面板中居中放置字体很棒的图标?

7 年前

manishk · 根据屏幕大小更改面板大小

7 年前

MaxCore · 禁用django 2.0管理响应行为

7 年前

user3410843 · 响应-将图标和文本对齐到菜单项的中心

7 年前

Perezo123 · 位置绝对元素:如何让他反应灵敏

7 年前

Madamadam · 文本右对齐到百分比大小的图像

7 年前