使用Bootstrap在Div内添加水平和垂直响应填充

时间：2017-04-19 12:27:49

标签： html5 css3 responsive-design

我在水平和垂直文本对齐和响应式设计方面遇到了一些问题：

情况：

  • 我使用Bootstrap
  • 该行分为两列相同大小的列（col-sm-6/50％）
  • 对于左列，我想应用背景图像
  • 对于正确的列，我想添加一个文本（图片说明）
  • 为了保持两个列的尺寸相同，我添加到两个列a 背景 - 相同大小的图像

问题：

  • 左右列应始终具有相同的维度
  • 文本应始终在其列
    • 中水平和垂直居中

更多信息：

  • 我尝试了几个解决方案，例如在顶部添加填充（更改位置，更改屏幕大小时）和使用转换：

＆＃13;
＆＃13; 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.header_ueber_uns_text {
            color: white;
              width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            padding-left: 4%;
        }
        
        .header_ueber_uns_background_image {
           padding-bottom: 30.1%;
        height: 0;
        background-image: url('http://placehold.it/1700x645');
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        }

        
        .ueber_uns_image_box_1 {
                   padding-bottom: 38%;
        height: 0;
        background-image: url('http://placehold.it/800x600');
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;  
        }

        .ueber_uns_image_box_2 {
                   padding-bottom: 38%;
        height: 0;
        background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/backgrundi.jpg?6191691157048477587');
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;  
        }
        
        .ueber_uns_text {
       color: grey;
        text-align: center;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 50px;
        }
＆＃13; 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 header_ueber_uns_background_image ">
            <div class="header_ueber_uns_text">
            <h6>ÜBER UNS</h6>
            <h3>KREATIVES DESIGN AUS BERLIN</h3>
            </div>
            </div>
        </div>
    </div>
    
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-xs-12 ueber_uns_image_box_1">
            </div>
            <div class="col-sm-6 ueber_uns_image_box_2">
            <div class="ueber_uns_text">
            <img src="Images/werkzeug_moebel_freund_manufaktur-300x243.png" width="100px" alt="">
            <h6>ÜBER UNS</h6>
            <p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p>
            </div>
            </div> 
        </div>
           <div class="row">
            <div class="col-sm-6 col-xs-12 ueber_uns_image_box_2">
            <div class="ueber_uns_text">
            <h6>ÜBER UNS</h6>
            <p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p>
            </div>
            </div> 
            <div class="col-sm-6 ueber_uns_image_box_1">
            </div>
        </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

在第一列中使用img标签来显示这样的图像，而不是将其添加为背景图像：

<div class="col-sm-6"><img src="your-image-url-here" /></div>
<div class="col-sm-6" style="text-align:center;line-height:[height-of-your-image-here];"><p style="vertical-align: middle;">Your text here</p></div>

答案 1 :(得分：0)

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.header_ueber_uns_text {
            color: white;
              width: 50%;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            padding-left: 4%;
        }
        
        .header_ueber_uns_background_image {
           padding-bottom: 30.1%;
        height: 0;
        background-image: url('http://placehold.it/1700x645');
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        }

        
        .ueber_uns_image_box_1 {
                   padding-bottom: 38%;
        height: 0;
        background-image: url('http://placehold.it/800x600');
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;  
        }

        .ueber_uns_image_box_2 {
                   padding-bottom: 38%;
        height: 0;
        background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/backgrundi.jpg?6191691157048477587');
        position: relative;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;  
        }
        
        .ueber_uns_text {
       color: grey;
        text-align: center;
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 50px;
        }
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 header_ueber_uns_background_image ">
            <div class="header_ueber_uns_text">
            <h6>ÜBER UNS</h6>
            <h3>KREATIVES DESIGN AUS BERLIN</h3>
            </div>
            </div>
        </div>
    </div>
    
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-xs-6 ueber_uns_image_box_1">
            </div>
            <div class="col-sm-6 ueber_uns_image_box_2">
            <div class="ueber_uns_text">
            <img src="Images/werkzeug_moebel_freund_manufaktur-300x243.png" width="100px" alt="">
            <h6>ÜBER UNS</h6>
            <p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p>
            </div>
            </div> 
        </div>
           <div class="row">
            <div class="col-sm-6 col-xs-6 ueber_uns_image_box_2">
            <div class="ueber_uns_text">
            <h6>ÜBER UNS</h6>
            <p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p>
            </div>
            </div> 
            <div class="col-sm-6 ueber_uns_image_box_1">
            </div>
        </div>
    </div>

相关问题
最新问题