Question

我想并排制作两个div，如下图所示。 I want

然而，当屏幕宽度变大时，布局变为： Actual 这是代码：
有没有谁可以帮我解决这个问题？非常感谢你，感谢你。

  .Frank-row
        {
            border: 2px solid green;
        }
        
        .Frank-left
        {
            border: 2px dotted red;
        }
        
        .Frank-right
        {
            border: 2px dotted orange;
        }

<div class="container-fluid" >
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 Frank-row" >
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-left" >
                    <p>left</p>
                    <p>left</p>
                    <p>left</p>
                    <p>left</p>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-offset-sm-6 col-md-offset-6 col-lg-offset-6 Frank-right" >
                    <p>right</p>
                    <p>right</p>
                    <p>right</p>
                    <p>right</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

这里有几个问题。首先，您不需要包装器div来实现此布局。

其次，你的div上有offset个类，它们会把它推到下一行。删除这些类已修复了布局。

参见示例here

Answer 2

请忽略col-offset部分！

.Frank-row {
  border: 2px solid green;
}

.Frank-left {
  border: 2px dotted red;
}

.Frank-right {
  border: 2px dotted orange;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-left">
      <p>left</p>
      <p>left</p>
      <p>left</p>
      <p>left</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 Frank-right">
      <p>right</p>
      <p>right</p>
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

小提琴测试大小调整： https://jsfiddle.net/xt41kj6j/

Answer 3

在文件中包含bootstrap.css，并在Frank-row div中的两个div中删除col-xs-12，因为col-xs-12类优先于其他col - **类css值。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 col-md-6 col-lg-6 Frank-left">
      <p>left</p>
      <p>left</p>
      <p>left</p>
      <p>left</p>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-6 Frank-right">
      <p>right</p>
      <p>right</p>
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

使用Bootstrap时划分布局

3 个答案: