Question

我对单个网站的内容由container表示。容器包含row，并且在一行box内。

现在我的框中需要以下布局：

两列，前1/3，秒宽2/3。
第二栏：包含营业时间。我还需要2列1/3和2/3

示例（目标）：

Columns 1 (1/3)                      | Columns 2 (2/3)
Column 1.1 (1/3) | Column 1.2 (2/3)  | 
Mo-Fr            | 8 am - 8 pm       |
Sa               | 10 am - 5 pm      |

我的代码：

<div class="container">

    <div class="row">
        <div class="box">

            <!-- Column 1 -->
            <div class="col-lg-3">
                <hr>
                <h2 class="intro-text text-center">Opening Hours</h2>
                <hr>
                <div class="row">
                    <div class="col-lg-3">
                        Mo-Fr:<br>
                        <br>
                        Sa:
                    </div>
                    <div class="col-lg-6">
                        8:00 - 12:30<br>
                        14:30 - 18:00<br>
                        07:30 - 13:00
                    </div>
                </div>
                <br>
                ...

            <!-- Column 2 -->
            <div class="col-lg-9">
                ...
            </div>
        </div>
    </div>

</div>

我的问题：

它可以在全屏模式下运行，但如果我减少浏览器（模拟移动设备），则列彼此之间就像：

Mo-Fr                 
Sa                
8 am - 8 pm  
10 am - 5 pm

Answer 1

<div class="container-fluid">
<div class="row">
<div class="box">
<!-- Column 1 -->
    <div class="col-lg-3">
            <hr>
            <h2 class="intro-text text-center">Opening Hours</h2>
            <hr>
            <div class="row">
                <div class="col-lg-3">
                    Mo-Fr:<br>
                    <br>
                    Sa:
                </div>
                <div class="col-lg-6">
                    8:00 - 12:30<br>
                    14:30 - 18:00<br>
                    07:30 - 13:00
                  </div>
              </div>
              <br>
              ...  
          <!-- Column 2 -->
           <div class="col-lg-9">
              ...
          </div>
      </div>
 </div>
 </div>

具有嵌套列的Bootstrap 2列

1 个答案: