消除两个引导列之间的空间答案

【问题标题】：Eliminate space between two bootstrap columns消除两个引导列之间的空间
【发布时间】：2019-08-02 04:15:29
【问题描述】：

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

        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'))

【问题讨论】：

标签： css reactjs bootstrap-4

【解决方案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

【讨论】：

我想知道两者之间有什么区别。 col-auto 总是会缩小列吗？如果我也想在 Alex 后面加一个空格，我该怎么做？
@user2320476 对于“Alex”之后的空格，您可以使用 JSX 空格 {' '} 或简单的 HTML &nbsp;。