html - 我无法在 Bootstrap 模式中向上移动元素

Question

出于某种原因，我无法在 Bootstrap 模式中将元素与其他元素一起向上移动。

这里:

特别是硬件/软件额外部分。看看它有多沉!在 CSS 中，它被命名为:

.hardsoft-xtra

我已经试过了:

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)*/

我怎样才能将它向上移动以使其与 Sistema operativo 保持一致？

这是 HTML 代码。由一个可点击 Bootstrap 面板组成，该面板打开特定于该面板的模式:

<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

为它们设置垂直对齐。

vertical-align:top;