Résultat attendu: https://imgur.com/P89k9Oy

Le progrès:

https://jsfiddle.net/zigzag/2Lptu49k/5/

Problème: je peux en quelque sorte voir la bande étroite de la zone transparente, mais je ne suis pas en mesure de couvrir entièrement la zone de légende. ce qui donne. Apprécier ton aide!

Code:

<div class="container">
<div class="row">
    <div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

    <div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

    <div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>
</div>

<div class="row">

<div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

<div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>

<div class="col-sm-4 tile">
        <div class="row">
            <div class="col-sm-12"  style="text-align:center">
                <span class="glyphicon glyphicon-headphones"></span>
            </div>
        </div>
        <div class="row caption">
            <div class="col-sm-6" style="text-align:center">
            One
            </div>
            <div class="col-sm-6" style="text-align:center">
            Two
            </div>
        </div>
    </div>
</div>

Ignorez vraiment les détails du code après la première ligne. Une fois que j'ai une tuile correcte, je m'attends à ce qu'elles fonctionnent toutes.

J'espère que je peux vraiment utiliser quelque chose de simple pour résoudre ce problème. J'ai recherché des questions similaires et essayé de tout rassembler, mais je pense que cela est un peu court.

0
zigzag 28 nov. 2017 à 11:54

3 réponses

Meilleure réponse

Presque là :). En utilisant Bootstrap, il n'est pas si sûr d'ajouter des classes avec beaucoup de propriétés de style à une ligne ou une classe. Divisez ces row caption éléments:

<div class="caption">
    <div class="row">
        <div class="col-sm-6" style="text-align:center">
          One
        </div>
        <div class="col-sm-6" style="text-align:center">
          Two
        </div>
    </div>
</div>

Ajout d'une marge négative (marge: 0; serait préférable, en y réfléchissant) à .caption pour contrer le remplissage: Vérifier le violon qui fonctionne

0
Brainfeeder 28 nov. 2017 à 09:08

J'ai un peu modifié votre code, mais je crois que c'est ce que vous recherchiez. Appuyez sur "pleine page" dans un extrait pour voir les résultats.

.row {
    padding-bottom: 10px;
    padding-top: 10px;
}

.tile {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("http://www.sepeb.com/random-image/random-image-001.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.caption {
    background: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: white;
}

.caption:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    background: rgba(152, 54, 55, 0.8);
}

.extend {
    padding-left: 0;
}

.extend:nth-of-type(3) {
    padding-right: 0;
}

.tile > .row {
    margin-left: 0;
    margin-right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <div class="container">
        <div class="row">
            <div class="col-sm-4 extend">
                <div class="tile">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center">
                            <span class="glyphicon glyphicon-headphones"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="caption">
                            <div class="col-sm-6" style="text-align:center">
                                One
                            </div>
                            <div class="col-sm-6" style="text-align:center">
                                Two
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="col-sm-4 extend">
                <div class="tile">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center">
                            <span class="glyphicon glyphicon-headphones"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="caption">
                            <div class="col-sm-6" style="text-align:center">
                                One
                            </div>
                            <div class="col-sm-6" style="text-align:center">
                                Two
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="col-sm-4 extend">
                <div class="tile">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center">
                            <span class="glyphicon glyphicon-headphones"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="caption">
                            <div class="col-sm-6" style="text-align:center">
                                One
                            </div>
                            <div class="col-sm-6" style="text-align:center">
                                Two
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="row">

            <div class="col-sm-4 extend">
                <div class="tile">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center">
                            <span class="glyphicon glyphicon-headphones"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="caption">
                            <div class="col-sm-6" style="text-align:center">
                                One
                            </div>
                            <div class="col-sm-6" style="text-align:center">
                                Two
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="col-sm-4 extend">
                <div class="tile">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center">
                            <span class="glyphicon glyphicon-headphones"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="caption">
                            <div class="col-sm-6" style="text-align:center">
                                One
                            </div>
                            <div class="col-sm-6" style="text-align:center">
                                Two
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <div class="col-sm-4 extend">
                <div class="tile">
                    <div class="row">
                        <div class="col-sm-12" style="text-align:center">
                            <span class="glyphicon glyphicon-headphones"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="caption">
                            <div class="col-sm-6" style="text-align:center">
                                One
                            </div>
                            <div class="col-sm-6" style="text-align:center">
                                Two
                            </div>

                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
0
norbidrak 28 nov. 2017 à 12:04

Essayez quelque chose comme ça -

.head {
  height: 70px;
  background: #CCC;
}
.tail {
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="clearfix">
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <div class="clearfix thumbnail">
      <div class="col-md-12">
        <div class="row head">
          <div class="col-md-12">
            IMAGE
          </div>
        </div>
        <div class="row tail">
          <div class="col-xs-6">
            Title
          </div>
          <div class="col-xs-6">
            Desc
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
    <div class="clearfix thumbnail">
      <div class="col-md-12">
        <div class="row head">
          <div class="col-md-12">
            IMAGE
          </div>
        </div>
        <div class="row tail">
          <div class="col-xs-6">
            Title
          </div>
          <div class="col-xs-6">
            desc
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1
dbigpot 28 nov. 2017 à 09:30
47527424