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容器成为一个弹性箱，并为它的子项设置一些宽度，如： `

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

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

它不是太优雅，但应该有效

bootstrap 4卡内容溢出

2 个答案: