Bootstrap 4 单独对齐行或列中的项目

Question

I'm using Bootstrap 4 to create a row of 2 items within a column where the first item stays all the way to the left in the row and the second item is always centered in the row. I am able to do this with my own CSS. Is there a way to do this only using Bootstrap with no extra CSS?

Here is my CSS:

.float_left {
    float:left;
}

.float_center {
        float: right;
        position: relative;
        left: -50%;
        text-align: left;
}

.float_center > .child {
    position: relative;
    left: 50%;
}

My HTML:

<div class="row" >
    <div class="col-12" style="z-index:5000;">       

        <span class="float_left">Left</span>

        <div class="float_center">
            <span class="child">Center</span>                        
        </div>
    </div>
</div>

Answer 1

1. display:flex; will make the data to sit in single row.
2. When you assign width of equal size ie 50% and move the text to left, that will sit in the center without extra code.
3. Flex is good for layout design, so don't worry about responsiveness it will take care of that as well.

 .align { display: flex; border: 1px solid red; width: 100%; }.float_left, .float_center { width: 50%; text-align: left; }

 <div class="row"> <div class="col-12 align" style="z-index:5000;"> <span class="float_left">Left</span> <div class="float_center"> <span class="child">Center</span> </div> </div> </div>

Answer 2

why don't you use col? I think this will work.

<div class="row" >
        <div class="col-12" style="z-index:5000;">       

            <div class="row">
                <span class="col">Left</span>

                <div class="col">
                    <span class="child">Center</span>                        
                </div>
            </div>
        </div.
    </div>

if you want fixed width for left side custom width