Question

我无法使用bootstrap在页面上正确显示列。它似乎设置正确，但它是垂直显示而不是我打算并排显示。相关代码：

<div class="container">
        <div class="row">
            <div class="col md 6">
                <h1 style="text-decoration: underline">A Message</h1>
                <h2>Some more information</h2>
                <img id="imageX" src="imageX.png" height="150" width="100"><h2>Signature</h2>
            </div>  
                <h2>Video Pre-Caption<h2>   
            <div class="col md 3">  
                <div>
                    <iframe width="250" height="150" src="https://www.youtube.com/embed/E__F5a2pQco" frameborder="1" allowfullscreen></iframe>
                </div>
            </div>
            <div class="col md 3">
                <div>
                    <iframe width="250" height="150" src="https://www.youtube.com/embed/Ra-Cq19vBXA" frameborder="1" allowfullscreen></iframe>
                </div>
            </div>
        </div>  
    </div>

Answer 1

在命名网格的引导类之间，您缺少-（连字符）字符。请试试这个：

<div class="container">
    <div class="row">
        <div class="col-md-6"> <!-- Notice col*-*md*-*6 .* is for clarity-->
            <h1 style="text-decoration: underline">A Message</h1>
            <h2>Some more information</h2>
            <img id="imageX" src="imageX.png" height="150" width="100"><h2>Signature</h2>
        </div>  
            <h2>Video Pre-Caption<h2>   
        <div class="col-md-3">  
            <div>
                <iframe width="250" height="150" src="https://www.youtube.com/embed/E__F5a2pQco" frameborder="1" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-md-3">
            <div>
                <iframe width="250" height="150" src="https://www.youtube.com/embed/Ra-Cq19vBXA" frameborder="1" allowfullscreen></iframe>
            </div>
        </div>
    </div>  
</div>

使用引导网格无法正确显示的列

1 个答案: