Bootstrap4:并排放置卡?

发光

所以我正在使用bootstrap4。我试图将一张卡放置在彼此叠放的其他两张卡的左侧,最左边的卡的长度设置为其他两张卡的总长度...。但是我可以不要弄清楚该怎么做。

<div class="card w-20">
    <blockquote class="blockquote card-body">
        <p>This card on the left of the other two cards, with a fixed height and scrolling.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
            </small>
        </footer>
    </blockquote>
</div>
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">How do you want to ask the question?</h5>
        <p class="card-text">Enter the information below.</p>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Description</span>
            </div>
            <textarea class="form-control" aria-label="With textarea"></textarea>
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">Supplemental Methods</span>
            </div>
            <button type="button" class="btn btn-outline-dark m-3">Text</button>
            <button type="button" class="btn btn-outline-dark m-3">Audio</button>
            <button type="button" class="btn btn-outline-dark m-3">Video</button>
            <button type="button" class="btn btn-outline-dark m-3">Image</button>						 
        </div>
        <button type="button" class="btn btn-outline-dark m-3 float-right">Next</button>						 
    </div>
</div>
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">How should students ask the question?</h5>
        <p class="card-text">Enter the information below.</p>
        <div class="input-group text-center">
            <button type="button" class="btn btn-outline-dark m-3">Audio</button>
            <button type="button" class="btn btn-outline-dark m-3">Video</button>
            <button type="button" class="btn btn-outline-dark m-3">Short Answer</button>
            <button type="button" class="btn btn-outline-dark m-3">Sorting</button>						 
        </div>
        <div class="input-group mx-auto">
            <button type="button" class="btn btn-outline-dark m-3">T/F</button>
            <button type="button" class="btn btn-outline-dark m-3">Matching</button>
            <button type="button" class="btn btn-outline-dark m-3">Label</button>
            <button type="button" class="btn btn-outline-dark m-3">Multiple Choice</button>						 
        </div>
        <button type="button" class="btn btn-outline-dark m-3 float-right">Next</button>					
    </div>
</div>

围兜

对于这种布局,您应该使用网格,而不是实用程序类:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col col-md-3">
            <div class="card h-100">
                <p class="card-body">This card on the left of the other two cards, with a fixed height and scrolling.</p>
            </div>
        </div>
        <div class="col col-md-9">
            <div class="card">
                <p class="card-body">How do you want to ask the question?<p>
            </div>
            <div class="card">
                <p class="card-body">How should students ask the question?</p>
            </div>
        </div>
    </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档