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

Answer 2

col-classes为您指定宽度。我做了一个新的小提琴，应该可以帮助你开始

https://jsfiddle.net/5z6ojmm1/2/

你想要的是.row中的一个.container，有2个col-md-6或col-lg-6类。这意味着内容将被分割为50/50

        <div class="row">
            <div class="col-md-6">
                <!-- image -->
            </div>
            <div class="col-md-6">
                <!-- text -->
            </div>
        </div>

在手机上折叠

如果您希望在移动设备上将列放在彼此之下，可以使用以下内容指定

        <div class="row">
            <div class="col-xs-12 col-md-6">
                <!-- image -->
            </div>
            <div class="col-xs-12 col-md-6">
                <!-- text -->
            </div>
        </div>

请注意col-xs-12和col-md-6，这意味着在XS设备上它将折叠为两个12（100％）列，在MEDIUM上它将分成2次6。

这是网格系统的解释

http://getbootstrap.com/css/#grid-options