Question

我正在使用flex，以便两个内部div（s）高度保持不变。但我面临的问题是，设计没有响应。在全宽度窗口中，它看起来很完美，但是当我们在移动设备中查看它时，它会尝试挤压内容。

如何解决这个问题？

还有其他方法可以让两个div的高度相同吗？（数据是动态的，所以我不能为任何div设置高度属性）

我的小提琴链接：link

＆＃13;

.image-bg-fluid-height {
  background-color: black;
  padding: 51px 0 0 0;
}

.image-bg-fluid-height,
.image-bg-fixed-height {
  /*text-align: center;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.gradient-background {
  background: #00BCD4;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #B2EBF2, #80DEEA, #4DD0E1, #00BCD4);
  /* Standard syntax (must be last) */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

.icon.default-bg {
  background-color: white;
  color: #ffffff;
}

.default-bg {
  background-color: #09afdf;
  color: #ffffff;
}

.icon {
  display: inline-block;
  text-align: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
  font-size: 24px;
  width: 150px;
  height: 150px;
  line-height: 58px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 40px;
  border: 1px solid transparent;
}

.default-bg {
  background-color: #09afdf;
  color: #ffffff;
}

.feature-box {
  margin-bottom: 50px;
  margin-top: 50px;
}

.tech-button {
  color: white !important;
  background-color: #00ACC1;
  border-color: #00ACC1;
}

.tech-button:hover {
  color: black !important;
  background-color: white;
}

.tech-button:active {
  color: black !important;
  background-color: white;
}

.tech-button:target {
  color: black !important;
  background-color: white;
}

.tech-button:focus {
  color: black !important;
  background-color: white;
}

.table > thead > tr > th {
  border-bottom: none !important;
}

.table > tbody > tr > td {
  border-top: none !important;
}

.box-title {
  background-color: #00BCD4;
  padding: 15px;
  color: white;
}

.web-icon {
  display: inline-block;
  text-align: center;
  position: relative;
  background-color: white;
  color: #000;
  font-size: 24px;
  width: 150px;
  height: 150px;
  line-height: 15px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  /*-webkit-border-radius: 5px;*/
  /*-moz-border-radius: 5px;*/
  /*border-radius: 40px;*/
  border: 1px solid transparent;
}

.signup-button:hover {
  background-color: white;
  color: #00BCD4;
}

.text-color {
  color: white;
}

.tld-span {
  padding: 10px 30px 10px 10px;
  background-color: #0097A7;
  color: white;
  -webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
}

.tld-span > a {
  color: white;
}

.tld-span > a:hover {
  text-decoration: none;
}

.manual-label {
  margin-top: 45px;
  font-weight: normal;
  font-size: 10px;
  color: #BDBDBD;
}

.export-button {
  color: white !important;
  background-color: #00ACC1 !important;
  border-color: #00ACC1 !important;
}

.export-button:hover {
  color: black !important;
  background-color: white !important;
}

.export-button:active {
  color: black !important;
  background-color: white !important;
}

.export-button:target {
  color: black !important;
  background-color: white !important;
}

.export-button:focus {
  color: black !important;
  background-color: white !important;
}

.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.ui-autocomplete {
  position: absolute;
  cursor: default;
  z-index: 30 !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="image-bg-fluid-height" style="display: flex;">
            <div class="col-md-8 gradient-background">
                <div class="col-md-12">
                    <div class="col-md-3 feature-box">
                        <span class="icon default-bg"><img src="/logos/favicon.png" width="100px" height="100px" style="margin-top: 25px;"></span>
                    </div>
                    <div class="col-md-9 col-xs-6 col-sm-3 feature-box text-color">
                        <h6>TECHNOLOGY</h6>
                        <h3>Tech</h3>
                        <p>Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream Loream .</p>
                    </div>
                </div>
                <div class="row pull-right">
                <span class="tld-span pull-right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a data-toggle="modal" data-target="#export-modal" style="cursor: pointer;"><i class="fa fa-share-square-o"></i> Export</a>
                </span>
                </div>
            </div>
            <div class="col-md-4" style="background-color: #FAFAFA;">
                <div class="col-md-12" style="flex: 1;">
                    <div class="col-md-12 feature-box text-center">
                        <p>Count</p>
                                                <hr style="border-top: dotted 1px #BDBDBD;">
                        <p>Top websites</p>
                        <a href="#top-websites" class="btn btn-default tech-button">VIEW WEBSITES</a>
                    </div>
                </div>
            </div>

    </header>

＆＃13;

注意：顶部黑色部分是我标题的填充。

谢谢。

Answer 1

使用内联属性样式混乱CSS样式表可能不太好，但是，由于您正在利用引导程序，因此可以使用简单的class="col-md-8 col-xs-12"使其响应，这意味着在中等屏幕中需要8/12列屏幕中的12/12列低于中等。

但是由于你的display: flex;正在阻止元素占用引导程序的百分比宽度，所以你可能不得不使用媒体查询@media (min-width: 992px)这是bootstrap中等视图的默认媒体查询

@media (min-width: 992px) { .image-bg-fluid-height { display: flex; } }

<header class="image-bg-fluid-height">
    <div class="col-md-8 col-xs-12 gradient-background">...</div>
    <div class="col-md-4 col-xs-12" style="background-color: #FAFAFA;">...</div>
</header>

JSFiddle：https://jsfiddle.net/Zay_DEV/yc92u1g2/1/

如何使灵活响应

1 个答案: