Question

我正在使用引导程序？列拆分为col-sm-6，同一行，现在图像部分已完成，高度为720px，但是文本的高度比图像大，我不是要在图像下方或框架的整个宽度中对齐其余文本？资产/图片/帖子/“ style =” height：100％;宽度：100％; object-fit：contains; border-radius：20px;“>

Answer 1

如果您只想让文字环绕图像，则只需要图像上的Bootstrap class =“ pull-left”。在这里，我举一个例子，希望它能对您有所帮助。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Wrapping Image with Text</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
        .row {
            margin-top: 30px;
        }
        .pull-left {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/people" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p> 
            </div>
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/nature" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
            </div>
            <div class="col-md-4"> 
                <img class="pull-left img-thumbnail" src="https://placeimg.com/100/100/arch" alt="...">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>
            </div>
        </div>
    </div>

    <!--latest jQuery 3-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <!--Bootstrap JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

在框架中对齐文本和图像是否需要调整文本？

1 个答案: