Bootstrap 4 Alpha 6 列占据全宽 [英] Bootstrap 4 Alpha 6 Column taking up full width

查看：20
本文介绍了Bootstrap 4 Alpha 6 列占据全宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚将我的一个电子应用程序升级到 Bootstrap 用于 Bootstrap 4 的新 Alpha 6.他们对网格系统和 flexbox 进行了大量调整，这反过来又给我的电子应用程序带来了一些奇怪的错误.目前我有一个侧边栏和一个主要区域.

并且侧边栏占据了整个屏幕的宽度，即使我将其定义为 .col-4 .col-xl-3，

它正在把所有东西都推到下面.如何防止这种行为发生?

更多代码，上一问题已修复，但通过@haxxtron 的回答，现在左侧没有填充.

 
<div class = "房间容器 pl-3 col-4 col-xl-3"><div class="room mt-2 col-offset-1"><h4 class = "text-muted">房间:</h4><h5 class = '显示房间名称'></h5><h4 class = "text-muted">聊天次数:</h4><h5 class = 'display chat-c​​ount'></h5><h4 class = "text-muted">用户名:</h4><h5 class = '显示用户名'></h5>
<p class = "lead footer" id="me">{ } with <img class = "heart" src="../js/img/heart.svg">作者:<a href="http://siwiec.us">Adam Siwiec</a></h3>

<div class="right-status-container col-8 col-xl-9"><div id="头像"></div><div id="状态容器"><h4 class = "pl-1 pt-1">状态:</h4><div类=pl-1"id=状态">

解决方案

.row 的，补偿应用于列的装订线.来自 文档

<块引用>

行是水平组的列，可确保您的列正确排列.我们在 .row 上使用负边距方法来确保您的所有内容在左侧正确对齐.

尝试以下操作:

JSFIDDLE

HTML

<div class="col-4 col-xl-3 no-gutter">剩下
<div class="col-8 col-xl-9">对

I just upgraded one of my electron apps to Bootstrap's new Alpha 6 for Bootstrap 4. They made lots of adjustments to the grid system and flexbox and in turn that has given me some wonky bugs in my electron app. Currently I have a sidebar and a main area.

and the sidebar is taking up the whole width of the screen, even though I have it defined as .col-4 .col-xl-3,

And it is shoving everything to the right of it down below. How can I prevent this behavior from happening?

Edit: More code, the previous issue is fixed but with @haxxtron's answer, there is now no padding on the left hand side.

    <div class ="row">
    <div class = "room-container pl-3 col-4 col-xl-3">
    <div class="room mt-2 col-offset-1">
        <h4 class = "text-muted">Room: </h4>
        <h5 class = 'display room-name'></h5>
        <h4 class = "text-muted">Chat Count: </h4>
        <h5 class = 'display chat-count'></h5>
        <h4 class = "text-muted">Username: </h4>
        <h5 class = 'display username'></h5>
    </div>
    <p class = "lead footer" id="me"> { } with <img class = "heart" src="../js/img/heart.svg"> by <a href="http://siwiec.us">Adam Siwiec</a></h3>
</div>

<div  class="right-status-container col-8 col-xl-9">
    <div id="avatar"></div>
    <div id="status-container">
        <h4 class = "pl-1 pt-1">Status: </h4>
        <div class = "pl-1" id = "status">
        </div>
    </div>
</div>
</div>

解决方案

.row's, compensate for the guttering that gets applied to columns. From Docs

Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on .row to ensure all your content is aligned properly down the left side.

Try the following:

JSFIDDLE

HTML

<div class="row">
    <div class="col-4 col-xl-3 no-gutter">
    LEFT
    </div>
    <div class="col-8 col-xl-9">
     RIGHT
    </div>
</div>

这篇关于Bootstrap 4 Alpha 6 列占据全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆