我有一张子弹清单，里面有一个巨型机.我希望图像旁边的大小与子弹大小完全相同

Question

EDIT：我已经设法调整了图像的大小，我必须制作一个静态数字，但我更希望高度由列表的长度决定。除此之外，我的新一期是让它与jumbotron中的文本对齐。Align="right"将图像放在右边，但会使其变得草率，并超过了jumbotron边界的底部。

HTML:

<div class="jumbotron">
    <div class="secrets">
        <h2> The Five Basics </h2>
        <ul>
            <li> number 1 </li>
            <li> number 2</li>
            <li> number 3 </li>
            <li> number 4 </li>
            <li> number 5 </li>
        </ul>
        <div class ="mindpower">
            <img src="images/mindpower.jpg"> 
        </div>
    </div>
</div>

CSS main.CSS（my-CSS）

.secrets img {
    max-width:25%;
    height:atuo;
}

CSS引导.CSS

.jumbotron {
    padding: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
    color: inherit;
}
.jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
}
.jumbotron > hr {
    border-top-color: #d5d5d5;
}
.container .jumbotron {
    border-radius: 6px;
}
.jumbotron .container {
    max-width: 100%;
}
@media screen and (min-width: 768px) {
    .jumbotron {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .container .jumbotron {
        padding-right: 60px;
        padding-left: 60px;
    }
    .jumbotron h1,
    .jumbotron .h1 {
        font-size: 63px;
    }
}

这将在列表后面添加一个漂亮的灰色背景，就像一个jumbotron。当我放置图像时，它会在列表下方，使jumbotron展开，看起来真的很难看。我正试图得到它，这样图像就直接放在列表旁边，保持列表的高度，同时保持比例正确。

Answer 1

看看这是否可以解决这个问题。在这里，我为每个div添加了引导列大小6，您可以根据自己的要求进行调整：

<div class="jumbotron">
    <div class="col-md-6 secrets ">
        <h2> The Five Basics </h2>
        <ul>
            <li> number 1 </li>
            <li> number 2</li>
            <li> number 3 </li>
            <li> number 4 </li>
            <li> number 5 </li>
        </ul>
    </div>
    <div class="col-md-6 mindpower">
        <img src="images/mindpower.jpg"> </a>
    </div>
</div>