Html 引导使用父宽度重复每个列下面的列

所以我尝试使用引导创建一个页面。现在，我试图实现的是在右侧有一个宽度为3/12的搜索栏，在左侧有宽度为1/12、8/12和9/12的项目，如所附图像所示

现在的问题是，在右边的搜索栏（col3）中，元素浮动在它们上面的元素旁边。我没有使用col9并在其中插入所有内容，因为我会因为列的原因而偏离设计尺寸

编辑：

这是密码

 <div class="container">
    <div class="row">
        <div class="col-sm-1" style="height:50px;background:red"></div>
        <div class="col-sm-8" style="height:50px;background:blue"></div>
        <div class="col-sm-9" style="height:100px;background:yellow"></div>

        <div class="col-sm-1" style="height:50px;background:red"></div>
        <div class="col-sm-8" style="height:50px;background:blue"></div>
        <div class="col-sm-9" style="height:100px;background:yellow"></div>

        <div class="col-sm-1" style="height:50px;background:red"></div>
        <div class="col-sm-8" style="height:50px;background:blue"></div>
        <div class="col-sm-9" style="height:100px;background:yellow"></div>

        <div class="col-sm-3 pull-right" style="height:250px;background:green"></div>
    </div>
</div>

具有当前结果的另一个图像

---

能够查看自定义CSS和HTML会有所帮助，仅一张图片并不能帮助您查看导致此问题的原因。您正在问一个HTML/CSS问题。你应该在你的问题中加入HTML和CSS，以正确地再现问题。还要进一步澄清你想要的

col3

是在什么地方划掉的。你问题中的措辞不清楚。很抱歉，我没有包括html，因为它是非常简单的引导，但你是对的，它是非常简单的引导，但我马上看到你缺少每行的div。