Solve the problem of setting border line feed in bootstrap row span, bootstrapborder

Solve the problem of setting border line feed in bootstrap row span, bootstrapborder

The graduation design of Hadoop has come to an end. In the past few days, I have been idle for a few days to seriously learn about Bootstrap, which is often used but is useless.
This document describes how to use the raster System in the Bootstrap framework.RowInternalSpanSetBorderLine feed problem.

Problem Reproduction

<style>.row div{    border:solid 1px #eee;    }</style><div class="container">        <div class="row">            <div class="span4">4</div>            <div class="span8">8</div>        </div></div>

CSS isrowInsidespan*After the border is set, the lastspan*Line feed because the raster system is deadspanAnd usefloatSortrowInternalsapn*, With the border added, the width is increased, so the line breaks automatically.

Solution 1

Do not modify the grid style as much as possible to avoid conflicts between the custom CSS and the Bootstrap raster system:

<style>.span4 > div, .span8 > div{   border: 1px solid #888;}</style><div class="row">   <div class="span4">       <div>a</div>   </div>   <div class="span8">       <div>b</div>   </div></div>

Solution 2

Userow-fluidReplacerow

<style>.row-fluid div{    border:solid 1px #eee;    }</style><div class="container">    <div class="row-fluid">        <div class="span4">a</div>        <div class="span8">b</div>    </div></div>

COMPARISON OF SOLUTIONS

<style type="text/css">        .span4 > div,        .span8 > div {            background: #0088CC;            text-align: center;            color: #fff;            border: 1px solid #888;        }        .row-fluid div {            background: #0088CC;            text-align: center;            color: #fff;            border: solid 1px #eee;        }</style><div class="container">       

: