ブートストラップ・モーダル内の要素を上に移動できません

Question

何らかの理由で、ブートストラップ・モーダル内の要素をいくつか別の要素に沿って上に移動できません。ここで

：

具体的ハードウェア/ソフトウェアの余分な一部。どのようにそれを見て！私はすでに試した

.hardsoft-xtra 

：CSSで、それは同様に命名されたパネルの

padding-top 
margin-top 
!important 

私のCSSの仕様を、私はそれを整理する方法：

/*Comienza los modals con las características GENERALES (class)*/ 

/*Este es en general donde se mete todo*/ 


/*Los @media hacen responsivos a los modals*/ 
.caracs{ 
    width: 460px !important; 
    font-family: 'Poppins', sans-serif; 
} 
@media (min-width: 768px) { .caracs{ 
    width: 500px !important; 
    font-family: 'Poppins', sans-serif; 
} } 
@media (min-width: 992px) { .caracs{ 
    width: 810px !important; 
    font-family: 'Poppins', sans-serif; 
} } 
@media (min-width: 1200px) { .caracs{ 
    width: 810px !important; 
    font-family: 'Poppins', sans-serif; 
} } 

/*No jala*/ 
.caracs > ul{ 
    text-align: left; 
} 

/*div izquierdo*/ 
.nombre-datos{ 
    display: inline-block; /*Necesario para que los divs estén en el mismo renglón*/ 
    width: 250px !important; 
    font-size: 0.8em; 
    text-align: justify; 
} 
    .valoracion{ 
     height: 35px; 
     background-color: orange; 
     color: white; 
     padding-top: 8px; 
     padding-left: 10px; 
     font-size: 1.5em !important; 
    } 

    .filtros{ 
     padding-top: 5px; 
     font-size: 1.2em; 
    } 
/*div-derecho*/ 
.mas-datos{ 
    vertical-align: top; /*Necesario para que el 2° div a la derecha comience desde arriba*/ 
    display: inline-block; 
} 
    .so{ 
     display: inline-block; 
     width: 235px; 
     background-color: #f2f2f2; 
     text-align: justify !important; 
    } 
    .hardsoft-xtra{ 
     display: inline-block; 
     width: 275px; 
     text-align: justify !important; 
    } 
    .nivel{ 
     background-color: #dbdbdb; 
     text-align: justify !important; 
    } 

/*Terminan los modals con las características GENERALES (class)*/ 

は、どのように私はそれを移動することができますそれで、それはと整列するようになりますSystema operativo？

ここにHTMLコードがあります。それらのためのトップとして垂直揃えを設定し

<div class="container"> 
    <div class="row"> 
     <a href="#modal2" data-toggle="modal" data-target="#modal2"> 
      <div class="col-sm-8 col-md-offset-2"> 
       <div class="panel panel-default buscadoresInternet sinInternet" id="app1"> 
        <div class="panel-heading"> 
         Google 
        </div> 
        <div class="panel-body apps"> 
         <div class="imagen"> 
          <img src="media/buscadoresInternet/google.png" alt="Google"> 
         </div> 
         <p>El buscador de Google o buscador web de Google (en inglés Google Search) es un motor de búsqueda 
          en la web propiedaad y el principal producto de Alphabet Inc., es el más utilizado en la 
          Web, recibe cientos de millones de consultas cada día a través de sus diferentes servicios. 
          El objetivo principal del buscador de Google es buscar texto en las páginas web, en lugar 
          de otro tipo de datos. 
         </p> 
        </div> 
       </div> 
      </div> 
     </a> 
    </div> 
</div> 

<!--Modal de Google--> 
<div class="modal fade" id="modal2" role="dialog"> 
    <div class="modal-dialog caracs"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <div class="nombre-datos"> 
        <img class="imagen-modal" src="media/buscadoresInternet/google.png" alt="Bing"> 
        <p><b>Google</b> es sin duda el mejor buscador actualmente, ya que mantiene estrictos estándares de 
         calidad a lo largo de sus productos y permite una búsqueda sumamente personalizada.</p> 
        <p class="text-right"><a href="https://www.bing.com/?setlang=es" target="_blank">Usar ahora</a></p> 
        <div class="valoracion"> 
         <p>Valoración: <b>10</b></p> 
        </div> 
        <div class="filtros"> 
         <p>¿Requiere internet?: <b>Sí</b></p> 
         <p>¿Gratuito?: <b>Sí</b></p> 
         <p>Pagos integrados: <b>No</b></p> 
        </div> 
       </div> 
       <div class="mas-datos"> 
        <div class="so text-center"> 
         <p>Sistema operativo</p> 
         <ul> 
          <li>Windows</li> 
          <li>OSX</li> 
          <li>Linux</li> 
          <li>Android</li> 
          <li>iOS</li> 
         </ul> 
        </div> 
        <div class="hardsoft-xtra text-center"> 
         <p>Hardware/Software extra</p> 
         <ul> 
          <li>Un navegador web (prueba buscando uno en este mismo catálogo).</li> 
         </ul> 
        </div> 
        <div class="nivel text-center"> 
         <p>Nivel educativo</p> 
         <ul> 
          <li>Primaria</li> 
          <li>Secundaria</li> 
          <li>Preparatoria</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!--Fin del modal de Google--> 

Answer 1

：はその1つの固有のモーダルを開く、クリッカブルブートストラップパネルで構成されています。

vertical-align:top;