Bootstrap网格系统无法按预期方式工作

Question

我是bootstrap和网格系统的新手，但就我而言，我构建的代码应该执行以下操作：

这是桌面上应该是什么样子的简短示例：

和移动：

我打算添加填充等，它位于JS fiddle。

我认为这可能与我的CSS有关..

我的CSS：

#history-img img
{
width: 300px;
height: 400px;
float: left;
margin-left: 100px;
margin-top: 35px;
border: 2px solid #000;
}
#history
{
    background-color: #0088CE;

}

#history-text
{
width: 800px;
height: 400px;
border: 2px solid #000;
background-color: #FFF;
float: right;
margin-top: 35px;
margin-right: 100px;
color: #000;
text-align: left;
padding: 30px;
}

#history-text p
{
font-size: 16px;
}

Answer 1

就像评论所说的那样，不要用你的css那样做。你拥有的最大值应该是CSS：

#history-img img {
  border: 2px solid #000;
}

#history-text{
  border: 2px solid #000;
  background-color: #FFF;
  color: #000;
}

#history-text p{
    font-size: 16px;
}

这是一个更具引导性的布局：

<section class="success" id="history">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>A brief History of Doosan Babcock</h2>
            </div>
        </div>     

        <div class="row">
            <div id="history-img" class="col-xs-4 col-lg-4">
                <img src="img/1920/babcock_team_1920_sm.jpg" alt="babcock team 1920"/>
            </div>

            <div class="col-xs-6 col-sm-8 col-lg-8" id="history-text">                     
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
        </div>  
    </div>  
</section>

Bootply http://www.bootply.com/HORwI8RjP3