Question

我开始创建一个类似react应用程序的博客，并使用引导网格系统。我的两列之间似乎有很大的空间。有办法摆脱这种情况吗？附有屏幕截图。

        import React from 'react';
        import ReactDom from 'react-dom';
        import 'bootstrap/dist/css/bootstrap.css';
        import faker from 'faker';

        //Now create a new component

        const App = () => {
            const myCustomStyle = {color:'green', fontSize:'50px'}
            return (
                <div className="container">
                   <div className="row">
                        <div class="col-3">
                            <a href="/" className="avatar"><img alt="avatar" src={faker.image.avatar()}></img></a>
                        </div>
                        <div class="col-9" >
                            <p><b>Alex</b><span>Today at 5.00pm</span></p>
                            <p>Great blog post!</p>
                        </div>
                   </div>
                </div>
            )
        }

        ReactDom.render(<App />, document.querySelector('#root'))

Answer 1

改用Bootstrap 4自动布局列...

col-auto-伸缩收缩
col-弹性成长

<div class="container">
   <div class="row">
        <div class="col-auto">
            <a href="/" class="avatar"><img alt="avatar" src="//placehold.it/100" /></a>
        </div>
        <div class="col">
            <p><b>Alex</b><span>Today at 5.00pm</span></p>
            <p>Great blog post!</p>
        </div>
   </div>
</div>

https://www.codeply.com/go/ZHoBi8rAHB

消除两个引导程序列之间的空间

1 个答案: