bootstrap 4卡内容溢出

Question

有人能帮我找出我的布局出了什么问题吗？我正在向一张卡片添加一些控件，但内容溢出。我要这张牌和最宽的一行一样宽。

<div class="container">
<div class="row">
    <div class="col-auto p-4 ">
        <div class="card">
            <div class="card-header"><h4>Find a contact</h4></div>
            <div class="card-body">
                <div class="row flex-nowrap">
                    <div class="col-4 p-1 text-right">First:</div>
                    <div class="col-8 p-1"><input type="text">
                    </div>
                </div>
                <div class="row p-1 flex-nowrap">
                    <div class="col-4 p-1 text-right">Last:</div>
                    <div class="col-8 p-1"><input type="text">
                    </div>
                </div>

                <div class="row p-1 flex-nowrap">
                    <div class="col-4 p-1 text-right">Compnay:</div>
                    <div class="col-8 p-1"><input type="text">
                    </div>
                </div>
                <div class="row p-1">
                    <div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox[enter link description here][1]"></div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row ">
                    <div class="col"><a href="#">more search</a></div>
                </div>

            </div>

        </div>
    </div>
</div>

​

这是jsfiddle：https://jsfiddle.net/msz2ndkr/21/

Answer 1

您的html的问题是下面这行：

       <div class="row p-1">
            <div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
        </div>

Bootstrap假设12列，而您指定了8列(col-8)。所有其他行都有12行。另外，去掉offset-4。以下是我的解决方案：

        <div class="row p-1">
            <div class="col-12 p-1 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
        </div>

Here is a fiddle

Answer 2

在某些元素及其父元素上计算和设置“width:auto”的方式似乎有问题。尝试将nowrap容器设置为flexbox，并为其子容器设置一些宽度，如下所示：

.nowrap-elems-container {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

` https://jsfiddle.net/a0godL7b/25/

它不是太优雅，但它应该可以工作